js导出图片添加水印

// js文件
let WaterMark = (() => {
	let painter = null
	// 获取画笔对象
	function getPainter(w,h) {
		if(painter === null){
			let canvas = document.createElement('canvas')
			canvas.width = w
			canvas.height = h
			painter = canvas.getContext('2d')
		}
		return painter
	}
	
	/**
	*  画印章
	* （x,y） 印章左上角位置
	*  width,height 印章的宽高
	*/
	function drawRect(canvas,x,y,width,height) {
		let painter = canvas.getContext('2d')
		// 记录初始化状态
		painter.save();
		// 移动中心点并旋转
		painter.translate(x + 0.5 * width, y + 0.5 * height);
		painter.rotate(-Math. PI / 180 * 15);
		painter.translate(-(x + 0.5 * width), -(y + 0.5 * height));
		painter.beginPath();
		painter.lineWidth = "3";
		painter.rect(x, y, width, height);
		painter.strokeStyle = "red";
		painter.stroke();
		painter.closePath();
		
		painter.beginPath();
		painter.lineWidth = "7";
		painter.rect(x - 10, y - 10, width + 20, height + 20);
		painter.strokeStyle = "red";
		painter.stroke();
		painter.closePath();

		painter.beginPath();
		painter.lineWidth = "1";
		painter.font = "21px Arial normal";
		painter.textAlign = "center";
		painter.strokeText("内部信息 禁止外传",x+93,y+33)；
		painter.strokeStyle = "red";
		painter.closePath();
		// 恢复初始状态
		painter.restore();
		return canvas;
	}

	/**
	* 封装水印
	* （x,y）左上角位置
	*  text 水印字符
	*  angle 水印字符旋转角度
	*/
	function drawLongleMark(canvas,x,y,text,angle) {
		let painter = canvas.getContext('2d')
		// 记录初始化状态
		painter.save();
		painter.translate(x, y);
		painter.rotate(-Math. PI / 180 * angle);
		painter.translate(-x, -y);
		
		painter.beginPath();
		// 字体颜色
		painter.lineWidth = "1";
		painter.strokeStyle = "rgba(0,0,0,0.1)";
		// 字体
		painter.font = "12px 黑体";
		painter.textBaseline = 'middle';
		// 画字
		painter.strokeText(text,x,y);
		painter.closePath();
		// 恢复初始状态
		painter.restore();
		return canvas;
	}
	/**
	* 将水印文字铺满屏幕
	* （screenW,screenH）屏幕的宽高
	* （startX,startY） 第一个水印文字的位置
	*  intervalX 水印列与列的间隔
	*  intervalX 水印行与行的间隔
	*/
	function spreadMarkScreen(canvas,text,angle,screenW,screenH,startX,startY,intervalX,intervalY) {
		// 添加水印的位置
		let markX = startX
		let markY = startY
		// 水印最右列距离距离屏幕右侧至少20
		while(markX < screenW - 20) {
			markY = startY
			while(markY <= screenH) {
				drawLongleMark(canvas,markX,markY,text,angle)
				// y轴添加高度
				markY+=intervalX
			}
			markX+=intervalX
		}
		return canvas
	}
	return {
		getPainter,
		drawRect,
		drawLongleMark,
		spreadMarkScreen,
	}
})()
export default WaterMark

基于canvas使用添加水印