uniapp vue 拍照并添加水印

/**
* 渲染文字
*
* @param {Object} obj
*/
drawText(ctx,obj) {
ctx.setFillStyle(obj.color);
ctx.setFontSize(obj.size);
ctx.setTextAlign(obj.align);
ctx.setTextBaseline(obj.baseline);
if (obj.bold) {
ctx.fillText(obj.text, obj.x, obj.y - 0.2);
ctx.fillText(obj.text, obj.x - 0.2, obj.y);
}
ctx.fillText(obj.text, obj.x, obj.y);
if (obj.bold) {
ctx.fillText(obj.text, obj.x, obj.y + 0.2);
ctx.fillText(obj.text, obj.x + 0.2, obj.y);
}
ctx.restore();
},
/**
* 文本换行
*/
textWrap(ctx,obj) {
var td = Math.ceil(obj.width / (obj.size))+2;
var tr = Math.ceil(obj.text.length / td);
for (var i = 0; i < tr; i++) {
var txt = {
x: obj.x,
y: obj.y + (i * obj.height),
color: obj.color,
size: obj.size,
align: obj.align,
baseline: obj.baseline,
text: obj.text.substring(i * td, (i + 1) * td),
bold: obj.bold
};
if (i < obj.line) {
if (i == obj.line-1){
txt.text = txt.text.substring(0, txt.text.length);
}
this.drawText(ctx,txt);
}
}
},
调用
warterMarkText(ctx,imgHeight){
ctx.setFontSize(this.fontSize) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
ctx.shadowBlur = 8;


this.warterMarkDrawText.y = imgHeight-360;
this.warterMarkDrawText.text="拍摄人："+this.warterMarkObj.userName;
this.drawText(ctx,this.warterMarkDrawText);

var longitude = this.warterMarkObj.longitude;
var latitude = this.warterMarkObj.latitude;
var lonlat = "（"+longitude + " ，" + latitude+"）"
this.warterMarkDrawText.y = imgHeight-300;
this.warterMarkDrawText.text="经纬度："+ lonlat;
this.drawText(ctx,this.warterMarkDrawText);

this.warterMarkDrawText.y = imgHeight-240;
this.warterMarkDrawText.text="时间："+this.getDate();
this.drawText(ctx,this.warterMarkDrawText);

this.warterMarkDrawText.y = imgHeight-180;
this.warterMarkDrawText.text="地址：" + this.warterMarkObj.address+this.warterMarkObj.subaddress;
this.warterMarkDrawText.width = this.canvasWdith;
this.textWrap(ctx,this.warterMarkDrawText);

},

水印对象
warterMarkDrawText:{
x: 40, //绘制文本的左上角x坐标位置
y: 0, //绘制文本的左上角y坐标位置
width:520, //文本区域宽度
height:40,//文本行高
color: '#FFF',//字体的颜色
line: 2,//最多显示几行
size: 32,//字体的字号
align: 'left',//文字的对齐，可选值 'left'、'center'、'right'
baseline: 'top',//设置文字的水平对齐，可选值 'top'、'bottom'、'middle'、'normal'
text: '',//在画布上绘制被填充的文本。
bold: true //是否加粗
},

fontSize:32,