canvas：给图片添加水印demo

前端御书房

已于 2023-10-14 09:28:43 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端 canvas

于 2022-02-03 11:53:12 首次发布

本文链接：https://blog.csdn.net/qq_40850839/article/details/122774873

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

这篇博客介绍了如何利用HTML5的Canvas API在图片上添加水印。通过创建一个函数drawWaterMark，该函数首先获取canvas上下文，然后定义绘制文本和创建图片的辅助函数。最后，函数接受图片源、水印文本、颜色和透明度参数，加载图片后在画布上绘制图片和水印。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给图片添加水印是使用h5的canvas实现。
下面是实现代码：

let drawWaterMark = function () {
  let ctx = document.getElementById('ctx').getContext('2d');
  function drawText(text, color, alpha) { // 设置水印文字的基本样式，并进行填充
    ctx.font = '20px 楷体';
    ctx.fillStyle = color;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.globalAlpha = alpha;
    let textWidth = ctx.measureText(text).width;
    ctx.fillText(text, ctx.canvas.width - textWidth, ctx.canvas.height - 20);
  }

  function createImg(src) { // 根据传入的图片路径创建图片，并调整画布的宽高与图片的宽高一致
    let img = new Image();
    img.src = src;
    ctx.canvas.height = img.height;
    ctx.canvas.width = img.width;
    return img;
  }

  return function (imgSrc, text, color, alpha) {
   let img = createImg(imgSrc);
    img.onload = function () { // 图片加载完毕后进行绘制
      ctx.drawImage(img, 0, 0);
      ctx.save();
      drawText(text, color, alpha);
      ctx.restore();
    }
  }
}();

drawWaterMark('./test.jpg', '水印', 'red', 0.3);