html页面添加水印

let info = {
            name: "小明",
            phone: "9527"
        };

        function watermark(info) {
            if(!info && !info.phone && !info.name) {
                return;
            }
            let userInfo = info;

            let c = document.createElement("canvas");
            document.body.appendChild.c;
            let ctx = c.getContext("2d");
            let str = `${userInfo.name}${userInfo.phone.substring(userInfo.phone.length-4)}`;
            ctx.font = "22px Arial";
            let gradient = ctx.createLinearGradient(0, 0, c.width, 0);
            gradient.addColorStop("1", "rgba(0,0,0,0.1)");
            ctx.fillStyle = gradient;
            ctx.setTransform(1, -0.4, 0.5, 1, 5, 60);
            ctx.fillText(str, 0, 30);
            ctx.fillText("xx公司", 30, 60);
            let imgsrc = c.toDataURL("image/png");
            document.body.style.background = "url(" + imgsrc + ") 0/40%,url(" + imgsrc + ") 35%/40%";

        }
        watermark(info)

你可能感兴趣的:(html页面添加水印)