|
|
@@ -0,0 +1,132 @@
|
|
|
+// 创建画布
|
|
|
+function createCanvas(width, height) {
|
|
|
+ // 创建一个画布
|
|
|
+ let canvas = document.createElement('canvas');
|
|
|
+ // 设置画布的宽高
|
|
|
+ canvas.width = width;
|
|
|
+ canvas.height = height;
|
|
|
+
|
|
|
+ return {
|
|
|
+ canvas,
|
|
|
+ ctx: canvas.getContext('2d')
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+// 填充水印
|
|
|
+function fillMark(canvas, html) {
|
|
|
+ html.style.pointerEvents = 'none';
|
|
|
+ html.style.background =
|
|
|
+ 'url(' + canvas.toDataURL('image/png') + ') left top repeat';
|
|
|
+}
|
|
|
+
|
|
|
+// 文字水印生成
|
|
|
+export function watermarkText(html, str, options = {}) {
|
|
|
+ let {
|
|
|
+ fontSize = 18, // 设置字体大小
|
|
|
+ fontFamily = 'Vedana', // 设置字体
|
|
|
+ width = str.length * fontSize, // 设置画布的宽
|
|
|
+ height = 320, // 设置画布的高
|
|
|
+ color = 'rgba(0, 0, 0, 0.3)', // 设置填充绘画的颜色/渐变模式
|
|
|
+ angle = -25, // 旋转角度
|
|
|
+ textAlign = 'left', // 设置文本内容的对齐方式
|
|
|
+ font, // 设置字体及大小
|
|
|
+ textBaseline = 'Middle', // 设置文本基线
|
|
|
+ start = 0, // 开始绘制文本的X坐标位置
|
|
|
+ end = height / 1.2 // 开始绘制文本的Y坐标位置
|
|
|
+ } = options;
|
|
|
+
|
|
|
+ // 创建画布
|
|
|
+ let cans = createCanvas(width, height);
|
|
|
+ let canvas = cans.canvas;
|
|
|
+ let ctx = cans.ctx;
|
|
|
+ ctx.rotate((angle * Math.PI) / 180);
|
|
|
+ ctx.font = font || fontSize + 'px ' + fontFamily;
|
|
|
+ ctx.fillStyle = color;
|
|
|
+ ctx.textAlign = textAlign;
|
|
|
+ ctx.textBaseline = textBaseline;
|
|
|
+ // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
|
|
|
+ ctx.fillText(str, start, end);
|
|
|
+ // 填充水印
|
|
|
+ fillMark(canvas, html);
|
|
|
+}
|
|
|
+
|
|
|
+// 图片水印生成
|
|
|
+export function watermarkImg(html, options = {}) {
|
|
|
+ let {
|
|
|
+ width = 200, // 设置画布的宽
|
|
|
+ height = 120, // 设置画布的高
|
|
|
+ angle = -25, // 旋转角度
|
|
|
+ x = 0, // 放置图像的x坐标
|
|
|
+ y = height / 1.5, // 放置图像的y坐标
|
|
|
+ src = '' // 图片地址
|
|
|
+ } = options;
|
|
|
+
|
|
|
+ // 创建画布
|
|
|
+ let cans = createCanvas(width, height);
|
|
|
+ let canvas = cans.canvas;
|
|
|
+ let ctx = cans.ctx;
|
|
|
+ ctx.rotate((angle * Math.PI) / 180);
|
|
|
+ let img = new Image(); // 创建图片
|
|
|
+ img.onload = function (e) {
|
|
|
+ // 监听图片加载完成
|
|
|
+ ctx.drawImage(img, x, y, this.width, this.height);
|
|
|
+ // 填充水印
|
|
|
+ fillMark(canvas, html);
|
|
|
+ };
|
|
|
+ img.src = src;
|
|
|
+}
|
|
|
+
|
|
|
+export class SvgWay {
|
|
|
+ constructor(watermark) {
|
|
|
+ this.watermark = watermark;
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { txt, x, y, width, height, color, font, fontSize, alpha, angle } =
|
|
|
+ this.watermark;
|
|
|
+ const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px">
|
|
|
+ <text x="${x}px" y="${y}px" dy="${fontSize}px"
|
|
|
+ text-anchor="start"
|
|
|
+ stroke="${color}"
|
|
|
+ stroke-opacity="${alpha}"
|
|
|
+ fill="none"
|
|
|
+ transform="rotate(${angle},${x} ${y})"
|
|
|
+ font-weight="100"
|
|
|
+ font-size="${fontSize}"
|
|
|
+ font-family="${font}"
|
|
|
+ >
|
|
|
+ ${txt}
|
|
|
+ </text>
|
|
|
+ </svg>`;
|
|
|
+ return `data:image/svg+xml;base64,${window.btoa(
|
|
|
+ unescape(encodeURIComponent(svgStr))
|
|
|
+ )}`;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export class CanvasWay {
|
|
|
+ constructor(watermark) {
|
|
|
+ this.watermark = watermark;
|
|
|
+ const { width, height } = watermark;
|
|
|
+ this.canvas = document.createElement('canvas');
|
|
|
+ this.canvas.setAttribute('width', width);
|
|
|
+ this.canvas.setAttribute('height', height);
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { txt, x, y, width, height, font, color, fontSize, alpha, angle } =
|
|
|
+ this.watermark;
|
|
|
+ const ctx = this.canvas.getContext('2d');
|
|
|
+ ctx.clearRect(0, 0, width, height);
|
|
|
+ ctx.textBaseline = 'top';
|
|
|
+ ctx.textAlign = 'left';
|
|
|
+ ctx.fillStyle = color;
|
|
|
+ ctx.globalAlpha = alpha;
|
|
|
+ ctx.font = `${fontSize}px ${font}`;
|
|
|
+ ctx.translate(x, y);
|
|
|
+ ctx.rotate((Math.PI / 180) * angle);
|
|
|
+ ctx.translate(-x, -y - fontSize);
|
|
|
+ ctx.fillText(txt, x, y + fontSize);
|
|
|
+ return this.canvas.toDataURL();
|
|
|
+ }
|
|
|
+}
|
