图片 动态水印

[sailei1]

var t_img = new Image();
let opt={
    fontStyle: "20px 黑体", //水印字体设置
    rotateAngle: -20 * Math.PI / 180, //水印字体倾斜角度设置
    fontColor: "rgba(93, 196, 33, 0.3)", //水印字体颜色设置
    firstLinePositionX: -20, //canvas第一行文字起始X坐标
    firstLinePositionY: 80, //Y
    SecondLinePositionX: 0, //canvas第二行文字起始X坐标
    SecondLinePositionY: 70 //Y
}
t_img.setAttribute('crossorigin', 'anonymous');
t_img.onload = function() {

    var cw = document.createElement('canvas');
    var crw = document.createElement('canvas');

    crw.width = this.width;
    crw.height = this.height;
    var ctx = cw.getContext("2d");
    //清除小画布
    ctx.clearRect(0, 0, 200, 100);
    ctx.font = opt.fontStyle;
    //文字倾斜角度
    ctx.rotate(opt.rotateAngle);

    ctx.fillStyle = opt.fontColor;
    //第一行文字
    ctx.fillText(`${localStorage.user} ${localStorage.phone||''}`, opt.firstLinePositionX, opt.firstLinePositionY);
    //第二行文字
    //ctx.fillText(window.watermark.mobile, opt.SecondLinePositionX, opt.SecondLinePositionY);
    //坐标系还原
    ctx.rotate(-opt.rotateAngle);

    var ctxr = crw.getContext("2d");
    //清除整个画布
    ctxr.clearRect(0, 0, crw.width, crw.height);
    //平铺--重复小块的canvas
    var pat = ctxr.createPattern(cw, "repeat");
    ctxr.fillStyle = pat;
    ctxr.drawImage(t_img, 0, 0);
    ctxr.fillRect(0, 0, crw.width, crw.height);
    image.src = crw.toDataURL();

};
t_img.src=image.src;