前台添加图片水印：Canvas

样式：

.conter(:style="{width:imgwidth+'px'}")//这段可以忽略不计
    canvas(id="canvasid")
    img(:src="imgSrc" id="imgId")


<style lang="less" scoped>
    .conter{
            margin: 0px auto;
            overflow:auto;
        }
</style>

注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素

 

目的：

1：绘图添加水印

2：新的img的src赋值canvas

            tt(){
                const m = this;
                var canvas = document.getElementById('canvasid');
              //var canvas = document.createElement('canvasid'); //如果页面不需要展示画布，用此行代码
                var ctx = canvas.getContext('2d');
                var hanzi = canvas.getContext("2d");
                var img = new Image();
                img.onload = function(){
                    var width = img.width;
                    var height = img.height;
                    m.imgwidth = width;

                    canvas.width = width;
                    canvas.height = height;

                    ctx.drawImage(img,0, 0,width,height);
                    //图片下载完毕时异步调用callback函数。
                    // ctx.drawImage(img, 0, 0, 960, 540);  //圖片
                    hanzi.font = "20px 黑体";
                    hanzi.fillStyle = "#ff9900";
                    // hanzi.translate(50,100);
                    // hanzi.rotate( 315* Math.PI/180);
                    var h = 0;
                    var gapY = 0;
                    var yy=30
                    var x = 20
                    /** 设置生成图片的文字样式 * */
                    if(width>=height){
                        gapY = height/3*2;//1111
                    }else{
                        gapY = height/5*4;//2222
                    }

                    hanzi.fillText("名称：321341242143141.jpg",x,gapY);
                    hanzi.fillText("时间：2020-09-17 23:23:23",x,yy*1 + gapY);
                    hanzi.fillText("经度： 113.988773  纬度：113.29763",x,yy*2 + gapY);
                    hanzi.fillText("方位角：12.9890",x,yy*3 + gapY);
                    hanzi.fillText("描述：描述描述描述描述描述描述描述描述描述描述描述",x,yy*4 + gapY);

                    //获取当前位置
                    // var sssss= canvas.toDataURL("image/png");
                    // current.imgs[0].push(sssss);  //获取图片base64代
                    // hanzi.rotate( 45* Math.PI/180);
                    hanzi.translate(-50, -100);

                    m.imgSrc  = canvas.toDataURL();
                };
                img.src = "/images/3333.png";


            }

效果实现：

参考来源：https://blog.csdn.net/rosy_yang/article/details/82993994