在 JS 中使用 canvas 给图片添加文字水印

---

实现说明：

1、先通过 new Image() 载入图片；

2、图片加载成功后使用 drawImage() 将图片绘制到画布上；

3、最后使用 fillText() 函数绘制水印。

下面展示了详细用法

效果展示：

本案例将图片的四个角都加上水印

在线演示 https://bi.cool/bi/P4O6TNp

实现代码：

html

<canvas id="canvas" width='300' height="200"></canvas>

javascript

// 载入图片
let img = new Image();
img.onload = drawWaterMarks;//图片加载成功的回调
img.src = '/static/material/300x200.svg';// 要绘制水印的图片

// 绘制水印
function drawWaterMarks(){
    // 创建画布
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

    ctx.drawImage(img,0,0)
    ctx.font = "bold 18px 'Fira Sans'";
    ctx.fillStyle = 'rgba(255,255,255,0.6)'; //水印颜色

    // 绘制水印
    ctx.fillText("水印文字", 10, 20);  //左上
    ctx.fillText("水印文字", 220, 20); //右上
    ctx.fillText("水印文字", 10, 190); //左下
    ctx.fillText("水印文字", 220, 190);//右下
}

代码说明：

1、本案例中图片是远程载入的，所以需要通过 img.onload 来等待图片加载完成后再回调 drawWaterMarks() 函数进行画布的绘制。如果图片是一个 Base64 编码的字符串则不需要回调，可以立即开始绘制。

2、其中变量 ctx 为一个 CanvasRenderingContext2D对象，我们用到它的以下属性与函数：

• drawImage()函数 将图片绘制到画布上
• font 设置文字样式
• fillStyle 填充文字颜色，使用 rgba 将文字透明度设置为 0.6
• fillText()函数 将文字绘制到画布上，通过修改它的第2和第3个参数调整水印位置

---

版权声明：[自由转载-注明出处-非商用-非衍生] (知识共享许可协议)