/**
* 给图片添加水印
* @memberof DomUtils.
* @param {string} dataUrl - png图片的data url
* @param {string} text - 水印文字
*/
watermarkImage (dataUrl, text, style = {opacity: 0.5, font: '14px serif', fillStyle: 'rgb(227,232,238)'}) {
return new Promise((resolve, reject) => {
let targetImage = new Image();
targetImage.onload = function () {
let h = targetImage.height,
w = targetImage.width,
canvas = Object.assign(document.createElement('canvas'), {width: w, height: h}),
ctx = canvas.getContext('2d');
ctx.drawImage(targetImage, 0, 0);
ctx.globalAlpha = style.opacity;
ctx.font = style.font;
ctx.fillStyle = style.fillStyle;
let fwidth = w / 4,
fheight = h / 4;
for (let hh = fheight; hh < h; hh += fheight) {
for (let ww = fwidth; ww < w; ww += fwidth) {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.translate(ww, hh);
ctx.rotate(-Math.atan(h / w));
ctx.fillText('text', -fwidth / 2, fheight / 2);
}
}
try {
canvas.toBlob(blob => {
resolve(blob);
});
} catch (e) {
console.error('Cannot watermark image with text:', text);
reject(e);
}
};
targetImage.src = dataUrl;
})
}
具体用法:
domToImage.toPng(document.querySelector('.read-template .items')).then(dataUrl => {
DomUtils.watermarkImage(dataUrl, 'test...').then((blob) => {
saveAs(blob, '文档.png');
});
});
domToImage和saveAs分别为dom-to-image,file-saver库