参照别人水印的封装自己改了一下代码如下:
function textBecomeImg(text,fontcolor,fontsize){//转成图片编码
let canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
let context = canvas.getContext('2d');
context.fillStyle = fontcolor;
context.font=fontsize+"px Arial";
context.textBaseline = 'middle';
context.fillText(text,0,fontsize/2);
let dataUrl = canvas.toDataURL('image/png');
return dataUrl;
}
function watermark(dom,text,color,fontsize,rotate) {/*dom:创建在那个dom上以id类名 */
let watermarkDiv = document.createElement('div');
let style = watermarkDiv.style;
style.position = 'absolute';
style.left = '-60%';
style.top = '-60%';
style.width = '250%';
style.height = '300%';
style.opacity = '0.15';
style.background = `url(${textBecomeImg(text,color,fontsize)})`;
style.zIndex = 99;
style.transform = `rotate(${rotate}deg)`;
style.pointerEvents = "none";
document.getElementById(dom).appendChild(watermarkDiv);
}
export default watermark
这个是模块化的写法,需要引入的时候script的type='module’
<script type="module">
import watermark from "../../assets/js/watermark.js";
//调用 ('创建在哪个dom节点上以ID命名','文案','字体颜色','字体大小','倾斜度')
watermark('app', `${vm.userName} ${vm.phone}`, 'gray', 22, 20)
</script>
当然也可以不模块引入,只需要将’export default watermark’去掉即可,灵活度还不够高能实现基本需求
效果如下: