uniapp拍照添加实时时间和地址

2024-07-14 19:28| 来源: 网络整理| 查看: 265

需求：提交公司厂商、工厂场景照片(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 }, }) },

【本文地址】

公司简介

联系我们