使用原生js給圖片增加水印
支持自定義 【 水印旋轉(zhuǎn)角度、字體大小、字體顏色、稠密度… 】

效果圖

直接上代碼（含注釋）
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  為左上角坐標(biāo)原點
            ctx.drawImage(img, 0, 0);
            //繪制水印
            if (objmsg.rotate != undefined && objmsg.rotate != null) {//旋轉(zhuǎn)角度[默認(rèn)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) {//字體大小[默認(rèn)20px]
                fontsize = objmsg.fontsize;
            }
            ctx.font = fontsize + "px Microsoft Yahei";
            var fontcolor = '255, 255, 255, 0.2';
            if (objmsg.fontcolor != undefined && objmsg.fontcolor != null) {//字體顏色透明度[默認(rèn)白色]
                fontcolor = objmsg.fontcolor;
            }
            ctx.fillStyle = "rgba(" + fontcolor + ")";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            var density = 3;
            if (objmsg.density != undefined && objmsg.density != null) {//稠密度[默認(rèn)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) {//回調(diào)函數(shù)
                objmsg.cb(base64);//回調(diào)函數(shù)
            }
        }
    }

使用

drawWaterMark.init({
        imgpath: "../images/birthdaybg2.jpg",//圖片路徑  string類型  [必傳]
        rotate: 20,//旋轉(zhuǎn)角度   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,//旋轉(zhuǎn)角度   int類型  默認(rèn)20
        fontsize: 20,//字體大小   默認(rèn)20
        fontcolor: "",//字體顏色  rgba類型  默認(rèn) 255, 255, 255, 0.2
        density: 3,//稠密度    數(shù)值越大，水印越多
        str: ["我是水印", "2022-10-15", "over"],    //水印文字 數(shù)組類型  最大三行（即lingth<=3）[必傳]
        domid: "",   //圖片dom的id   用來更換添加水印后的圖片
        cb: function (base64) { }//回調(diào)函數(shù)，可以拿到添加水印后的圖片的base64編碼
    }

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

發(fā)現(xiàn)問題：少數(shù)情況下加完水印后的base64編碼為空白圖。