使用js添加文字水印
经常在一些发布页面后面会有用户名的水印,主要用来在截图时候标识是谁发的。下面我们来看一下如何使用js来添加水印。
这里我们使用canvas来进行水印绘制
/**
* 绘制水印
* @param canvas 页面中canvas
* @param text 水印文字
* @param width 绘制区域宽度
* @param height 绘制区域高度
*/
let drawWaterMark = ({canvas, text,width,height,color,fontSize=14}) => {
const ctx = canvas.getContext("2d");
let wmConfig = {
font: 'microsoft yahei',//字体
fontSize: fontSize || 14,//字号,
color:color || "rgba(0,0,0,.3)"//字体颜色
}
if(canvas.width < width){
canvas.width = width
}if(canvas.height < height){
canvas.height = height
}
ctx.fillStyle = wmConfig.color
ctx.font = `{wmConfig.fontSize}px{wmConfig.font}`;
ctx.lineWidth = 1;
ctx.textAlign = "left";
ctx.textBaseline = "middle";
// //文字坐标
const maxPx = Math.max(width, height);
const stepPx =50;
let arrayX = [0];//初始水印位置 canvas坐标 0 0 点
while (arrayX[arrayX.length - 1] < maxPx / 2) {
arrayX.push(arrayX[arrayX.length - 1] + stepPx);
}
arrayX.push(...arrayX.slice(1, arrayX.length).map((el) => {
return -el;
}));
for (let i = 0; i < arrayX.length; i++) {
for (let j = 0; j < arrayX.length; j++) {
ctx.save();
ctx.translate(width / 2, height / 2); ///画布旋转原点 移到 图片中心
ctx.rotate(-Math.PI / 5);
let offsetY = wmConfig.fontSize + 2;
ctx.fillText(text, arrayX[i], arrayX[j] + offsetY);
ctx.restore();
}
}
};
主功能方法就写完了,我们看一下调用
页面结构
<style>
#canvas{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99;
pointer-events: none;
}
</style>
<canvas id="canvas"> </canvas>
调用结构
let canvas = document.getElementById("canvas")
drawWaterMark({canvas,width:canvas.offsetWidth,height:canvas.offsetHeight,text:"OECOM"})
至此,在页面上添加水印的方法已经完成了
另外还有一种场景是给图片增加水印,原理其实是相同的,需要我们将图片画在canvas上,然后再进行操作,最终转换会图片即可。
/**
* 图片路径转成canvas
* @param {图片url} url
*/
async function imgToCanvas(url) {
// 创建img元素
const img = document.createElement("img");
img.src = url;
img.setAttribute("crossOrigin", "anonymous"); // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
await new Promise((resolve) => (img.onload = resolve));
// 创建canvas DOM元素,并设置其宽高和图片一样
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// 坐标(0,0) 表示从此处开始绘制,相当于偏移。
canvas.getContext("2d").drawImage(img, 0, 0);
return canvas;
}
然后就是将canvas转为图片即可
/**
* canvas转成img
* @param {canvas对象} canvas
*/
function convasToImg(canvas) {
// 新建Image对象,可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}