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

实现说明：

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

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

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

下面展示了详细用法

效果展示：

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

实现代码：

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对象，我们用到它的以下属性与函数：