图片添加水印-526互联

var drawWaterMark = {};
    drawWaterMark.init = function (objmsg) {
        console.log(objmsg)
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.src = objmsg.imgpath;
        // img.setAttribute("crossOrigin", 'Anonymous');
        console.log(img)
        img.onload = function () {
            console.log(111)
            //绘制和图片大小相同的canvas
            canvas.width = img.width;
            canvas.height = img.height;
            //canvas绘制图片，0 0  为左上角坐标原点
            ctx.drawImage(img, 0, 0);
            //绘制水印
            if (objmsg.rotate != undefined && objmsg.rotate != null) {//旋转角度[默认20]
                ctx.rotate((Math.PI / 120) * -objmsg.rotate);
            } else {
                ctx.rotate((Math.PI / 120) * -0);
            }
            var fontsize = 20;
            if (objmsg.fontsize != undefined && objmsg.fontsize != null) {//字体大小[默认20px]
                fontsize = objmsg.fontsize;
            }
            ctx.font = fontsize + "px Microsoft Yahei";
            var fontcolor = '255, 255, 255, 0.2';
            if (objmsg.fontcolor != undefined && objmsg.fontcolor != null) {//字体颜色透明度[默认白色]
                fontcolor = objmsg.fontcolor;
            }
            ctx.fillStyle = "rgba(" + fontcolor + ")";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            var density = 3;
            if (objmsg.density != undefined && objmsg.density != null) {//稠密度[默认3]
                density = objmsg.density
            }
            for (var i = -1000; i < img.height; i += img.width / density) {
                for (var k = 0; k < img.height; k += img.width / density) {
                    var str = objmsg.str;
                    if (str.length == 1) {
                        ctx.fillText(str[0], i, k);
                    } else if(str.length==2){
                        ctx.fillText(str[0], i, k);
                        ctx.fillText(str[1], i, k + (fontsize-0+5));//多行
                    } else if (str.length == 3 || str.length > 3) {
                        ctx.fillText(str[0], i, k);
                        ctx.fillText(str[1], i, k + (fontsize - 0 + 5));//多行
                        ctx.fillText(str[2], i, k + (fontsize*2 - 0 + 5));//多行
                    }
                }
            }
            var base64 = canvas.toDataURL("image/png");//添加过水印的base64图片
            console.log(base64)
            objmsg.cb(base64);//回调函数
        }
    }

    export default drawWaterMark;

　　使用

drawWaterMark.init({
            imgpath: require('@/assets/imgs/daiban/unselected.png'),//图片路径  string类型  [必传]
            rotate: 0,//旋转角度   int类型
            fontsize: 20,//字体大小
            fontcolor: "0, 0, 0, 1",//字体颜色  rgba类型
            density: 1,//稠密度
            str: ["我是水印", "2022-10-15"],    //[必传]
            domid: "srqq",//图片id
            cb: function (base64) {
                console.log(base64)
            }
        })

水印