js给图片添加文字水印并获取对应的base64

html

    <canvas id="myCanvas" "/>

js

                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                var img = new Image();
                // 这里可以放 图片路径 "./test.jpg" || base64图片 || 图片链接
                img.src = '图片地址';
                // console.log(img, 'SRC', srcImg)
                img.onload = function () {
                        let awidth = img.width/3;
                        let aheight = img.height/3;
                        c.width=awidth;		// 注意：没有单位
                        c.height=aheight;
                        // 设置图片在canvas上 前面两个0,0是边距, 后面是宽高
                        ctx.drawImage(img,0,0,awidth,aheight);
                        // 添加文字 后面两个数字是坐标
                        ctx.font  = "20px sans-serif"
                        ctx.fillStyle = '#fff'
                        ctx.fillText('你需要添加的文字', 20, aheight-30);
                        // console.log(c.toDataURL());
                        //你需要的添加文字后的base64
                        c.toDataURL();
                  }