前端显示水印

 

watermark(str) {
    let node = document.getElementById("imageWrapper");
    let can = document.createElement("canvas");
    can.width = document.documentElement.clientWidth / 2 // 一行显示两个
    can.height = (node.offsetHeight - 60) / 3 // 显示三行
    let ctx = can.getContext('2d');
    let fontSize = 14
    ctx.font = `${fontSize}px Georgia`
    let { width: wText } = ctx.measureText(str)
    let hText = fontSize
    ctx.fillStyle = '#CCCCCC'
    ctx.translate((can.width + 10 - (Math.cos(30) * wText))/2, (can.height - hText) / 2)  
    //角度
    f(-30)
    function f(i) {
        let deg = Math.PI / 180 * i
        ctx.rotate(deg, deg)
        ctx.fillText(str, -wText / 2, hText / 2)
    }
    let div = document.createElement("div");
    div.id = 'watermark';
    div.style.opacity = 1
    div.style.pointerEvents = "none";
    div.style.top = "44px";
    div.style.left = "0px";
    div.style.position = "fixed";
    div.style.zIndex = "100000";
      
    div.style.width = document.documentElement.clientWidth + "px";
    div.style.height = (node.offsetHeight - 60) + "px";
    div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
    node.appendChild(div);
}