JS 图片添加水印

用js给图片格式的文件添加水印并渲染到页面上，这里通过canvas来绘制；

第一步将获取到图片路径，将图片转换为canvas

 1 /**
 2      * 图片路径转成canvas
 3      * @param {图片url} url
 4      */
 5     async function imgToCanvas(url) {
 6         // 创建img元素
 7         const img = document.createElement("img");
 8         img.src = url;
 9         img.setAttribute("crossOrigin", "anonymous"); // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
10         await new Promise((resolve) => (img.onload = resolve));
11         // 创建canvas DOM元素，并设置其宽高和图片一样
12         const canvas = document.createElement("canvas");
13         canvas.width = img.width;
14         canvas.height = img.height;
15         // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
16         canvas.getContext("2d").drawImage(img, 0, 0);
17         return canvas;
18     }

既然已经是canvas了，那就可以使用canvas的绘制文字的方法

 1 //画布添加水印
 2     const drawWaterMark = (canvas, textArray) => {
 3         const ctx = canvas.getContext("2d");
 4         let wmConfig = {
 5             font: 'microsoft yahei',
 6             textArray: textArray,
 7             density: 2.5
 8         }
 9         let fontSize = 20;
10         let imgWidth = canvas.width;
11         let imgHeight = canvas.height;
12 
13         ctx.fillStyle = "white";
14         ctx.font = `${fontSize}px ${wmConfig.font}`;
15         ctx.lineWidth = 1;
16         ctx.fillStyle = "rgba(255,255,255,1)";
17         ctx.textAlign = "left";
18         ctx.textBaseline = "middle";
19         // //文字坐标
20         const maxPx = Math.max(imgWidth, imgHeight);
21         const stepPx = Math.floor(maxPx / wmConfig.density);
22         let arrayX = [0];//初始水印位置 canvas坐标 0 0 点
23         while (arrayX[arrayX.length - 1] < maxPx / 2) {
24 
25             arrayX.push(arrayX[arrayX.length - 1] + stepPx);
26         }
27         arrayX.push(...arrayX.slice(1, arrayX.length).map((el) => {
28 
29             return -el;
30         }));
31 
32         for (let i = 0; i < arrayX.length; i++) {
33 
34             for (let j = 0; j < arrayX.length; j++) {
35 
36                 ctx.save();
37                 ctx.translate(imgWidth / 2, imgHeight / 2); ///画布旋转原点 移到 图片中心
38                 ctx.rotate(-Math.PI / 5);
39                 if (wmConfig.textArray.length > 3) { //最多显示三行水印，也可以根据需要自定义
40                     wmConfig.textArray = wmConfig.textArray.slice(0, 3);
41                 }
42                 wmConfig.textArray.forEach((el, index) => {
43                     let offsetY = fontSize * index + 2;
44                     ctx.fillText(el, arrayX[i], arrayX[j] + offsetY);
45                 });
46                 ctx.restore();
47             }
48         }
49     };

水印绘制完成后，再将canvas转换为图片格式

 1 /**
 2      * canvas转成img
 3      * @param {canvas对象} canvas
 4      */
 5     function convasToImg(canvas) {
 6         // 新建Image对象，可以理解为DOM
 7         var image = new Image();
 8         // canvas.toDataURL 返回的是一串Base64编码的URL
 9         // 指定格式 PNG
10         image.src = canvas.toDataURL("image/png");
11         return image;
12     }

最后运行一下

// 运行示例
    async function run() {
        const imgUrl = "https://cdn.jsdelivr.net/gh/zhangpanfei/static@demo/img/test.jpg";
        // 1.图片路径转成canvas
        const tempCanvas = await imgToCanvas(imgUrl);
        // 2.canvas添加水印
        drawWaterMark(tempCanvas, ['自定义水印','水印2'])
        // 3.canvas转成img
        const img = convasToImg(tempCanvas);
        // 查看效果
        document.body.appendChild(img);
    }