uniapp在小程序端拍摄图片加水印及获取设备拍摄方向
2023-12-21 本文已影响0人
花影_62b4
//添加拍摄水印
//pictureDate：拍照日期,lonlat：拍摄经纬度,address：拍摄地点,direction：设备方向
addWaterMark(tempFilePath,pictureDate,lonlat,address,direction){
let e=this;
return new Promise((resolve,reject)=>{
uni.showLoading({
title: '图片加载中',
})
uni.getImageInfo({
// 注意此时的地址是正常的图片地址 以下是给图片添加水印返回新的url地址
src: tempFilePath,
success: function(res) {
// 得到图片宽高
let {width,height} = res;
console.log(width,height,'111111111')
// 定义画布大小
e.canvasWidth = width + 'px';
e.canvasHeight = height + 'px';
// 在自定义组件内 需要传递第二参数 this canvas才生效
var ctx = uni.createCanvasContext("imgCanvas", e);
// 清除画布内像素
ctx.clearRect(0, 0, width, height);
// 开始一条路径
ctx.beginPath();
ctx.fillStyle = '#ffffff'; //将线条颜色设置为白色
ctx.fillRect(0, 0, width, height);
// 在画布上绘制图像
ctx.drawImage(tempFilePath, 0, 0, width, height);
// 为图片添加水印
let unit= ((width/height)>(375/812))?(1/375)*width:(1/812)*height;//1px对应图片上的单位
let fontSize=10*unit;//375px对应10px字号
ctx.setFontSize(fontSize);
ctx.setFillStyle('rgba(225,225,225,1)');
let x=12*unit;
//if(lonlat){
//日期
ctx.fillText(pictureDate,x,height-80*unit);
//地址
ctx.fillText(address,x,height-62*unit);
//经纬度
ctx.fillText(lonlat,x,height-43*unit);
//姓名画方形
let name=UserInfo.getUserInfo().nickName
let y=height - 32*unit;
let width0=fontSize*name.length+12*unit;
let height0=20*unit;
let radius=2*unit;//圆角
let rectBg='rgba(255,255,255,0.16)';
e.drawRadiusRect(ctx,x,y,width0,height0,name,radius,rectBg,unit)
//方位
let x1=x+width0+6*unit;
let width1=fontSize*direction.length+12*unit;
let w=direction.length==1?width1: 57*unit;
e.drawRadiusRect(ctx,x1,y,w,height0,direction,radius,rectBg,unit)
//}
// 开始绘制添加水印的图片并显示在页面中
ctx.draw(false, () => {
setTimeout(() => {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: width,
height: height,
destWidth: width,
destHeight: height,
fileType: 'jpg',
canvasId: 'imgCanvas',
success: function(resb) {
uni.hideLoading();
e.canvasWidth = 0;
e.canvasHeight = 0;
e.isShow = false;
resolve(resb.tempFilePath)
},
fail(err) {
console.log(err)
uni.hideLoading()
e.canvasWidth = 0;
e.canvasHeight = 0;
e.isShow = false;
e.$utils.showNoneToast('水印绘制失败，请重新拍摄');
reject();
}
}, e)
}, 500);
}, e);
},
fail: function(err) {
console.log(err.errMsg);
uni.hideLoading()
e.$utils.showNoneToast('该图片为矢量图不支持下载');
}
})
})
},
//画带圆角的长方形
drawRadiusRect(ctx,x,y,w,h,name,r ,rectBg,unit){
// 绘制圆角矩形
ctx.beginPath();
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.moveTo(x + r, y);
ctx.lineTo(x + w - r, y);
ctx.lineTo(x + w, y + r);
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + w, y + h - r);
ctx.lineTo(x + w - r, y + h);
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + h);
ctx.lineTo(x, y + h - r);
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.lineTo(x + r, y);
//使用arcTo在安卓上有一个边会呈现锯齿形
// ctx.moveTo(x + cornerRadius, y); // 左上角直线开始
// ctx.lineTo(x + width - cornerRadius, y); // 到右上角圆弧开始点
// ctx.arcTo(x + width, y, x + width, y + cornerRadius, cornerRadius); // 右上角圆弧
// ctx.lineTo(x + width, y + height - cornerRadius); // 右侧直线
// ctx.arcTo(x + width, y + height, x + width - cornerRadius, y + height, cornerRadius); // 右下角圆弧
// ctx.lineTo(x + cornerRadius, y + height); // 底部直线
// ctx.arcTo(x, y + height, x, y + height - cornerRadius, cornerRadius); // 左下角圆弧
// ctx.lineTo(x, y + cornerRadius); // 左侧直线
// ctx.arcTo(x, y, x + cornerRadius, y, cornerRadius); // 左上角圆弧结束，连接到开始点
// ctx.closePath(); // 关闭路径，连接开始点和结束点
// 设置样式并填充圆角矩形
ctx.fillStyle = rectBg;
ctx.fill();
//填上内容
ctx.beginPath();
ctx.setFillStyle('rgba(225,225,225,1)');
ctx.fillText(name,x+6*unit,y+13*unit);
},
//获取设备方向的字符串，传入角度，返回 N、S、W、E、N?E、N?W、S?E、S?W
getDirection(angel){
console.log(270.00==270)
let str='';
if(angel==0){
str='N';
}else if(angel==90){
str='E'
}else if(angel==180){
str='S'
}else if(angel==270){
str='W'
}else if(angel>0&&angel<90){
str=`N${Number(angel).toFixed(2)}°E`
}else if(angel>90&&angel<180){
str=`S${(180-Number(angel)).toFixed(2)}°E`
}else if(angel>180&&angel<270){
str=`S${(Number(angel)-180).toFixed(2)}°W`
}else if(angel>270&&angel<360){
str=`N${(360-Number(angel)).toFixed(2)}°W`
}
return str;
},
