html页面添加水印
2019-07-19 本文已影响0人
robotlee8
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)