样式:
.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