在 JS 中使用 canvas 给图片添加文字水印，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            // 载入图片
let img = new Image();
img.onload = drawWaterMarks;//图片加载成功的回调
img.src = 'https://uovol.com/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);//右下
}