拍照添加实时时间和地址

需求:提交公司厂商、工厂场景照片(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
	},
})
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值