JS水印的制作

参照别人水印的封装自己改了一下代码如下：

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’去掉即可，灵活度还不够高能实现基本需求
效果如下：