需求:提交公司厂商、工厂场景照片(PC端上传是手机拍照然后用ps填入时间和拍摄地址)
现在APP要求拍照自动获取现场地址和时间并带入进照片。
实现思路:uni.chooseImage获取的图片画入canvas里面,再添加本地时间和地址(由QQMapWX获取实时地址)水印然后再用canvasToTempFilePath合成图片继续上传。
// 图片上传
let that = this
uni.chooseImage({
count: 9, //默认9
// type: 'file',
sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera'],
success: (res) => {
console.log(res)
for (let i = 0; i < res.tempFiles.length; i++) {
that.getLocation(res.tempFiles[i])
}
}
});
// 通过经纬度获取公司地址
getLocationName(obj) {
let that = this;
let qqmapsdk = new QQMapWX({
key: '在腾讯位置服务申请的key'
});
qqmapsdk.reverseGeocoder({
location: {
latitude: that.latitude,
longitude: that.longitude
},
/* get_poi: 1,
poi_options: 'policy=2;radius=3000;page_size=20;page_index=1', */
success: function(res) {
that.addr = res.result.address
that.drawPic(obj)
// that.doSubmit(obj)
},
fail: function(error) {
console.error(error);
}
})
},
//获取地址经纬度
getLocation(obj) {
let that = this;
uni.getLocation({
type: 'wgs84',
// #ifdef APP-PLUS
geocode: true,
// #endif
success: function(res) {
uni.showToast({
title: res.latitude,
icon: 'none',
duration: 99999999999
});
that.latitude = res.latitude
that.longitude = res.longitude
that.getLocationName(obj)
},
fail: function() {
uni.showToast({
title: "获取失败",
icon: 'none',
duration: 99999999999
});
wx.getSetting({
success(res) {
if (!res.authSetting['scope.userLocation']) {
wx.authorize({
scope: 'scope.userLocation',
success() {
wx.chooseLocation({
success: function(res) {
that.latitude = res.latitude
that.longitude = res.longitude
that.getLocationName(obj)
},
})
},
fail() {
console.log("error")
}
})
}
}
})
}
})
},
drawPic(obj) {
let that = this;
var path = obj.path;
uni.getImageInfo({
src: path,
success: function(res) {
uni.showLoading({
title: '上传中.'
});
var width = res.width / 10,
height = res.height / 10;
that.w = width;
that.h = height;
//获取当前时间
let roleNameInfo = date.formatHMS()
let location = that.addr
//创建canvas
const ctx = uni.createCanvasContext('firstCanvas', that);
ctx.drawImage(res.path, 0, 0, width, height); //先画出图片
setTimeout(() => {
//将声明的时间放入canvas
//#ifdef APP-PLUS
ctx.setFontSize(12) //注意:设置文字大小必须放在填充文字之前,否则不生效
ctx.font = 'nomal 12px 微软雅黑'
//#endif
//#ifdef MP-WEIXIN
ctx.setFontSize(5) //注意:设置文字大小必须放在填充文字之前,否则不生效
ctx.font = 'nomal 5px 微软雅黑'
//#endif
//将声明的时间放入canvas
// ctx.strokeStyle = "black";
ctx.setFillStyle('white');
ctx.strokeText(roleNameInfo, 6, height - 4);
ctx.strokeText(location, 6, height - 20);
ctx.fillText(roleNameInfo, 6, height - 4);
ctx.fillText(location, 6, height - 20);
let name = that.imgData.name + "照片";
ctx.strokeText(name, 6, 20);
ctx.fillText(name, 6, 20);
ctx.draw(false, () => { //开始制作
setTimeout(() => { //使用定时是因为制作水印需要时间,设置定时才不会出bug
uni.canvasToTempFilePath({ //将画布中内容转成图片,即水印与图片合成
width: width, // 截取的画布的宽
height: height,
canvasId: 'firstCanvas',
success: (v) => {
obj.path = v.tempFilePath
uni.hideLoading();
//上传方法,自己写
that.doSubmit(obj)
},
fail: (e) => {
uni.hideLoading();
uni.showToast({
title: "上传失败,请再次尝试!",
icon: 'none',
duration: 2000
});
}
}, that)
}, 200)
})
}, 3000);
//end
},
})
},