用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);
}
来看看效果