原生js-实现给图片增加水印

使用原生js给图片增加水印
支持自定义 【 水印旋转角度、字体大小、字体颜色、稠密度… 】

效果图

直接上代码（含注释）
HTML代码

<img src="../images/birthdaybg2.jpg" id="drowsy" />

JS代码

var drawWaterMark = {};
    drawWaterMark.init = function (objmsg) {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.src = objmsg.imgpath;
        img.setAttribute("crossOrigin", 'Anonymous');
        img.onload = function () {
            //绘制和图片大小相同的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) * -20);
            }
            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图片
            if (objmsg.domid != undefined && objmsg.domid != null) {//id图片
                document.getElementById(objmsg.domid).src = base64;
                //$(objmsg.domid).attr('src', base64);
            }
            if (objmsg.cb != undefined && objmsg.cb != null) {//回调函数
                objmsg.cb(base64);//回调函数
            }
        }
    }

使用

drawWaterMark.init({
        imgpath: "../images/birthdaybg2.jpg",//图片路径  string类型  [必传]
        rotate: 20,//旋转角度   int类型
        fontsize: 20,//字体大小
        fontcolor: "255, 255, 255, 0.7",//字体颜色  rgba类型
        density: 3,//稠密度
        str: ["我是水印", "2022-10-15"],    //[必传]
        domid: "drowsy",//图片id
        cb: function (base64) {
            console.log(base64)
        }
})

---

配置项objmsg

objmsg = {
        imgpath: "",//图片路径  string类型  [必传]
        rotate: 20,//旋转角度   int类型  默认20
        fontsize: 20,//字体大小   默认20
        fontcolor: "",//字体颜色  rgba类型  默认 255, 255, 255, 0.2
        density: 3,//稠密度    数值越大，水印越多
        str: ["我是水印", "2022-10-15", "over"],    //水印文字 数组类型  最大三行（即lingth<=3）[必传]
        domid: "",   //图片dom的id   用来更换添加水印后的图片
        cb: function (base64) { }//回调函数，可以拿到添加水印后的图片的base64编码
    }

参数名	必填	参数说明	示例
imgpath	是	图片路径。支持本地图片和网络图片；图片不能跨域	https://img.wenhairu.com/images/2021/12/01/1xvrC.jpg
rotate	否	旋转角度。int类型默认20	20
fontsize	否	字体大小。默认20	20
fontcolor	否	字体颜色。reba格式，默认255,255,255,0.2	255,255,255,0.2
density	否	稠密度。数值越大，水印越多，默认3	3
str	是	水印文字。数组格式，最大数组长度为3，即3行水印	[“我是水印”,“2022-10-15”,“最多三行”]
domid	否	图片id。传值用来替换水印图片	drowsy
cb	否	回调函数。用来获取添加水印后的图片base64编码	function(base64){}

---

--------2022-10-17------------

发现问题：少数情况下加完水印后的base64编码为空白图？求大佬指教