利用Canvas添加水印

最新推荐文章于 2025-11-05 23:53:17 发布

原创

最新推荐文章于 2025-11-05 23:53:17 发布 · 置顶 · 4.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #JavaScript

本文介绍了如何利用canvas在PDF（以图片形式展示）上添加水印，包括两个步骤：首先绘制PDF，然后在其上绘制倾斜的水印文字。内容适合前端开发者，提供了一个简单实现水印的思路和逻辑。

由于工作加学习原因，很久没能来博客跟大家分享一下自己的一些技术栈了。今天也是抽空给大家做个简单的分享。

水印在我们的正常工作中还是比较常见的一种神操作，尤其像一些带有公司私有专利的时候就需要为其添加公司特有的标志。本人也是很久没有接触玩canvas了，但有个前端大牛的朋友跟我讨论如何在PDF添加水印。经本人回想，查阅文档。简单实现了利用canvas添加水印的方法。下面也是简单分享一下实现思路跟逻辑。

主题思路：分为两步，第一步先绘制PDF(本文用图片替代);

第二步，在已绘制的PDF上绘制水印倾斜字体；

var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  function drawImg() {
    var img = new Image();
      img.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521260437608&di=e94551a06b820d76061528ed8463e8f6&imgtype=0&src=http%3A%2F%2Fp6.qhimg.com%2Ft016b2acd8540563ac2.jpg";
      img.onload  = f

最低0.47元/天解锁文章