devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp 水印/相机/授权位置、相机、相册权限_uni app安卓相机

作者：菜鸟追梦旅行 | 2024-03-20 15:08:31

赞

踩

uni app安卓相机

自定义相机水印

  1. <template>
  2. 	<view>
  3. 		<view v-if="loaded && cameraEnable">
  4. 			<camera :device-position="device" :flash="flash" @error="error" resolution="high"
  5. 				:style="{ width: '100%',position: 'relative', height: mainHeight + 'px' }">
  6. 				<cover-view class="waterMark-center">
  7. 					<cover-view class="waterMark">
  8. 						<!-- 时间 -->
  9. 						<cover-view class="dec">{{nowDate}}</cover-view>
  10. 						<!-- 地址 -->
  11. 						<cover-view class="dec">{{address}}</cover-view>
  12. 					</cover-view>
  13. 				</cover-view>
  14.  
  15.  
  16. 				<!-- 旋转摄像头 -->
  17. 				<cover-image @click="cameraRotate" class="rotate" src="/static/camera/rotate.png"></cover-image>
  18. 				<!-- 打开/关闭 闪关灯 -->
  19. 				<cover-image @click="switchLights" class="lights" :src="lightsImg"></cover-image>
  20. 				<!-- 拍照 -->
  21. 				<cover-view class="cameraBtn" @click="takePhoto">
  22. 					<cover-view class="cameraBtn-inner"></cover-view>
  23. 				</cover-view>
  24.  
  25. 				<!-- 底部预览生成图片 -->
  26. 				<cover-view class="bottomBg" v-if="fileList.length > 0">
  27. 					<cover-view>
  28. 						<cover-view @click="ViewImage(index)" class="imgBox" v-for="(item,index) in fileList"
  29. 							:key="index">
  30. 							<cover-image class="imgItem" :src="item.url" mode="aspectFill"></cover-image>
  31. 							<cover-view class="cu-tag" @tap.stop="DelImg" :data-index="index">
  32. 								<cover-image class="iconClose" src="/static/camera/close.png"
  33. 									mode="aspectFill"></cover-image>
  34. 							</cover-view>
  35. 						</cover-view>
  36. 					</cover-view>
  37. 				</cover-view>
  38. 			</camera>
  39. 			<!-- canvas元素，利用它的功能，实现添加水印 -->
  40. 			<canvas :style="{ width: cwidth + 'px', height: cheight + 'px', position: 'absolute', top: '-999999999px'}" canvas-id="firstCanvas"></canvas>
  41. 		</view>
  42. 		<view v-else>
  43. 			相机不可用
  44. 		</view>
  45. 	</view>
  46. </template>
  1.  
  2. <script setup>
  3. 	import {
  4. 		ref,
  5. 		reactive,
  6. 		toRefs,
  7. 		getCurrentInstance,
  8. 		computed,
  9. 		onMounted
  10. 	} from 'vue'
  11. 	import {
  12. 		onLoad,
  13. 		onShow
  14. 	} from '@dcloudio/uni-app'
  15. 	import { getCurrentDate } from '@/common/date.js'
  16. 	// 引入SDK核心类
  17. 	// import QQMapWX from '@/common/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
  18. 	const props = defineProps({
  19. 		// camera 组件高度
  20. 		mainHeight: {
  21. 			type: Number,
  22. 			default: 380
  23. 		},
  24. 		isPageLoading: {
  25. 			type: Boolean,
  26. 			default: false
  27. 		}
  28. 	})
  29. 	const emit = defineEmits(['onBack', 'update:isPageLoading'])
  30.  
  31. 	let { ctx } = getCurrentInstance()
  32.  
  33. 	let loaded = ref(false)
  34. 	let cameraEnable = ref(false)
  35. 	// 防止mounted与onShow冲突
  36. 	let loop = ref(false)
  37.  
  38. 	let fileList = ref([])
  39.  
  40. 	let data = reactive({
  41. 		device: 'back', //前置或后置摄像头，值为front, back
  42. 		flash: 'off', // 闪光灯，值为auto, on, off
  43. 		nowDate: '',
  44. 		address: '', //当前地址信息
  45. 		cwidth: 50, // canvas 元素宽度
  46. 		cheight: 50 // canvas 元素高度
  47. 	})
  48.  
  49. 	let {
  50. 		device,
  51. 		flash,
  52. 		nowDate,
  53. 		address,
  54. 		cwidth,
  55. 		cheight
  56. 	} = toRefs(data)
  57.  
  58. 	let lightsImg = computed(() => {
  59. 		return data.flash === 'off' ? '/static/camera/lights_on.png' : '/static/camera/lights.png'
  60. 	})
  61.  
  62. 	onLoad((option) => {
  63. 		
  64. 		if (option.list.length > 0) {
  65. 			fileList.value = JSON.parse(option.list)
  66. 		}
  67. 		// 获取当前日期时间
  68. 		data.nowDate = getCurrentDate()
  69. 	})
  70.  
  71. 	onShow(() => {
  72. 		if (loaded.value && !loop.value) {
  73. 			// 轮询当前相机权限状态，当用户授权则将cameraEnable设置为true
  74. 			loopGetCameraInfo()
  75. 		}
  76. 	})
  77.  
  78. 	onMounted(() => {
  79. 		setTimeout(() => {
  80. 			loaded.value = true
  81. 			loopGetCameraInfo()
  82. 		}, 1000);
  83. 	})
  84.  
  85. 	function loopGetCameraInfo() {
  86. 		loop.value = true;
  87. 		getAuthInfo();
  88. 		setTimeout(() => {
  89. 			if (!loaded.value) {
  90. 				loopGetCameraInfo()
  91. 			} else {
  92. 				if (!cameraEnable.value) {
  93. 					loopGetCameraInfo()
  94. 				} else {
  95. 					loop.value = false
  96. 				}
  97. 			}
  98. 		}, 500);
  99. 	}
  100.  
  101.  
  102.  
  103. 	// 判断相机、相册、位置是否授权------------授权建议写在外面
  104. 	function getAuthInfo() {
  105. 		uni.getSetting({
  106. 			success(res) {
  107. 				const authSetting = res.authSetting;
  108. 				if (authSetting['scope.camera'] && authSetting['scope.writePhotosAlbum'] && authSetting['scope.userLocation']) {
  109. 					// 已经授权
  110. 					emit('update:isPageLoading', true)
  111. 					cameraEnable.value = true;
  112. 					getLocation()
  113. 				} else {
  114. 					emit('update:isPageLoading', true)
  115. 					cameraEnable.value = false;
  116. 				}
  117. 			}
  118. 		});
  119. 	}
  120.  
  121.  
  122. 	
  123. 	
  124. 	function saveImg(path) {
  125. 		// 已经授权
  126. 		uni.saveImageToPhotosAlbum({
  127. 			filePath: path,
  128. 			complete(res) {
  129. 				// console.log('保存图片', res);
  130. 			}
  131. 		})
  132. 	}
  133. 	
  134. 	// 获取当前地址
  135. 	function getLocation() {
  136. 		// 获取当前位置信息
  137. 		uni.getLocation({
  138. 			type: 'gcj02',
  139. 			success: function(res) {
  140. 				data.address = 'test11111111111111111111111'
  141. 			
  142. 				// let qqmapsdk = new QQMapWX({
  143. 				// 	key: "自己申请的腾讯地图key"
  144. 				// })
  145. 				// // 根据经纬度反解析出地址名称
  146. 				// qqmapsdk.reverseGeocoder({
  147. 				// 	location: {
  148. 				// 		latitude: res.latitude,
  149. 				// 		longitude: res.longitude
  150. 				// 	},
  151. 				// 	success(addressRes) {
  152. 				// 	},
  153. 				// 	fail(err) {
  154. 				// 		// getLocation()
  155. 				// 		console.log(err, '获取地址失败');
  156. 						
  157. 				// 	}
  158. 				// })
  159. 			},
  160. 			fail(err) {
  161. 				console.log(err);
  162. 				uni.showToast({
  163. 					title: err.errMsg,
  164. 					icon: 'none'
  165. 				})
  166. 			}
  167. 		})
  168. 	}
  169. 	// 旋转摄像头
  170. 	function cameraRotate() {
  171. 		if (data.device == 'front') {
  172. 			data.device = 'back'
  173. 		} else {
  174. 			data.device = 'front'
  175. 		}
  176. 	}
  177. 	// 打开/关闭 闪光灯
  178. 	function switchLights() {
  179. 		data.flash = data.flash === 'off' ? 'on' : 'off'
  180. 	}
  181. 	// 删除水印照片
  182. 	function DelImg(e) {
  183. 		let index = e.currentTarget.dataset.index
  184. 		uni.showModal({
  185. 			content: '确定要删除这张照片吗？',
  186. 			cancelText: '取消',
  187. 			confirmText: '确认',
  188. 			success: res => {
  189. 				if (res.confirm) {
  190. 					fileList.value.splice(index, 1)
  191. 				}
  192. 			}
  193. 		})
  194. 	}
  195. 	// 查看照片
  196. 	function ViewImage(index) {
  197. 		let imgs = [];
  198. 		for (let i = 0; i < ileList.value.length; i++) {
  199. 			imgs.push(ileList.value[i].url);
  200. 		}
  201. 		uni.previewImage({
  202. 			urls: imgs,
  203. 			current: index
  204. 		})
  205. 	}
  206.  
  207. 	// 点击拍照
  208. 	function takePhoto() {
  209. 		if (!data.address) {
  210. 			uni.showToast({
  211. 				title: '请重新获取当前位置',
  212. 				icon: 'none'
  213. 			})
  214. 			return
  215. 		}
  216. 		uni.showLoading({
  217. 			mask: true
  218. 		})
  219. 		// 创建并返回 camera 组件的上下文 cameraContext 对象
  220. 		const cameraContext = uni.createCameraContext();
  221. 		// 拍照
  222. 		cameraContext.takePhoto({
  223. 			quality: 'high', // 图片质量高
  224. 			success: (res) => {
  225. 				let tempImagePath = res.tempImagePath; // 临时图片路径
  226. 				uni.getImageInfo({
  227. 					src: tempImagePath,
  228. 					success(imgRes) {
  229. 						data.cwidth = imgRes.width / 3
  230. 						data.cheight = imgRes.height / 3
  231. 						drawWaterMark(imgRes.path)
  232. 					},
  233. 					fail() {
  234. 						uni.hideLoading()
  235. 					}
  236. 				})
  237. 			}
  238. 		});
  239. 	}
  240. 	// 画水印
  241. 	function drawWaterMark(path) {
  242. 		let markctx = uni.createCanvasContext('firstCanvas', ctx)
  243. 		markctx.drawImage(path, 0, 0, data.cwidth, data.cheight);
  244. 		markctx.setFontSize(14); // 设置字体大小为 10px
  245. 		markctx.setFillStyle('#FFFFFF'); // 设置颜色为白色
  246. 		let textToWidth = data.cwidth * 0.03; // 绘制文本的左上角x坐标位置
  247. 		let textToHeight1 = data.cheight * 0.10; // 绘制文本的左上角y坐标位置
  248. 		// let textToHeight2 = data.cheight * 0.16;
  249. 		// 绘制日期和时间
  250. 		markctx.fillText(data.nowDate, textToWidth, textToHeight1);
  251. 		let first = 0
  252. 		for (var i = 0; i < data.address.length; i++) {
  253. 			if(first > data.address.length) {
  254. 				break
  255. 			}
  256. 			let str = data.address.substring(first, first + 20)
  257. 			// 绘制地址
  258. 			let numSpace = ((i + 1) * 6 + 10) / 100
  259. 			markctx.fillText(str, textToWidth, data.cheight * numSpace);
  260. 			first += 20
  261. 		}
  262. 		// 绘制地址
  263. 		// markctx.fillText(data.address, textToWidth, textToHeight2);
  264.  
  265. 		markctx.draw(false, () => {
  266. 			setTimeout(() => { // 保证第一张图片渲染正常 -- 定时300有时候也会不正常（多测试）--至少400
  267. 				uni.canvasToTempFilePath({
  268. 					canvasId: 'firstCanvas',
  269. 					success(res) {
  270. 						fileList.value.push({
  271. 							url: res.tempFilePath
  272. 						})
  273. 						emit('onBack', fileList.value)
  274. 						uni.hideLoading()
  275. 						saveImg(res.tempFilePath)
  276. 					},
  277. 					fail(err) {
  278. 						uni.hideLoading()
  279. 						console.log('合成失败', err);
  280. 					}
  281. 				}, ctx)
  282. 			}, 300)
  283. 		})
  284. 	}
  285.  
  286.  
  287. 	// 用户不允许使用摄像头时触发
  288. 	function error(e) {
  289. 		// uni.showToast({
  290. 		// 	title: e.detail.errMsg,
  291. 		// 	icon: 'none'
  292. 		// })
  293. 	}
  294. </script>
  1. <style lang="scss" scoped>
  2. 	.waterMark-center {
  3. 		display: flex;
  4. 		flex-direction: row;
  5. 		align-items: center;
  6. 		justify-content: center;
  7. 		height: 32%;
  8. 		width: 750rpx;
  9. 	}
  10.  
  11. 	.waterMark {
  12. 		width: 750rpx;
  13. 		box-sizing: border-box;
  14. 		padding: 30rpx;
  15. 		color: #EEEEEE;
  16. 		font-size: 34rpx;
  17.  
  18. 		.dec {
  19. 			width: 100%;
  20. 			white-space: pre-wrap;
  21. 			margin-bottom: 15rpx;
  22. 		}
  23. 	}
  24.  
  25. 	.cameraBtn {
  26. 		width: 120rpx;
  27. 		height: 120rpx;
  28. 		line-height: 120rpx;
  29. 		border: 6rpx #FFFFFF solid;
  30. 		border-radius: 50%;
  31. 		padding: 8rpx;
  32. 		position: absolute;
  33. 		left: calc(50% - 60rpx);
  34. 		bottom: 210rpx;
  35.  
  36. 		&-inner {
  37. 			width: 100%;
  38. 			height: 100%;
  39. 			border-radius: 50%;
  40. 			background-color: #FFFFFF;
  41. 			text-align: center;
  42. 			color: #007AFF;
  43. 		}
  44. 	}
  45.  
  46. 	.rotate {
  47. 		width: 52rpx;
  48. 		height: auto;
  49. 		position: absolute;
  50. 		right: 44rpx;
  51. 		bottom: 580rpx;
  52. 	}
  53.  
  54. 	.lights {
  55. 		width: 40rpx;
  56. 		height: auto;
  57. 		position: absolute;
  58. 		right: 50rpx;
  59. 		bottom: 450rpx;
  60. 	}
  61.  
  62. 	.bottomBtn {
  63. 		width: 100%;
  64. 		height: 150rpx;
  65. 		padding-bottom: 15rpx;
  66. 		position: absolute;
  67. 		bottom: 0;
  68. 		left: 0;
  69. 		text-align: center;
  70. 		display: flex;
  71. 		justify-content: space-between;
  72.  
  73. 		.btn {
  74. 			width: 30%;
  75. 			height: 150rpx;
  76. 			font-size: 34rpx;
  77. 			color: #FFFFFF;
  78. 			line-height: 150rpx;
  79. 		}
  80. 	}
  81.  
  82. 	.bottomBg {
  83. 		width: 100%;
  84. 		height: 170rpx;
  85. 		box-sizing: border-box;
  86. 		padding: 20rpx 30rpx 40rpx;
  87. 		position: absolute;
  88. 		bottom: 0;
  89. 		left: 0;
  90. 		background-color: rgba(0, 0, 0, .8);
  91. 		display: flex;
  92. 		justify-content: space-between;
  93. 		align-items: center;
  94.  
  95. 		.imgBox {
  96. 			width: 110rpx;
  97. 			height: 110rpx;
  98. 			float: left;
  99. 			margin-right: 40rpx;
  100. 			position: relative;
  101.  
  102. 			.cu-tag {
  103. 				position: absolute;
  104. 				right: 0;
  105. 				top: 0;
  106. 				border-bottom-left-radius: 2px;
  107. 				padding: 3px 5px;
  108. 				height: auto;
  109. 				background-color: rgba(0, 0, 0, 0.5);
  110. 				font-size: 10px;
  111. 				vertical-align: middle;
  112. 				font-family: Helvetica Neue, Helvetica, sans-serif;
  113. 				white-space: nowrap;
  114. 				color: #ffffff;
  115. 			}
  116. 		}
  117.  
  118. 		.imgItem {
  119. 			width: 110rpx;
  120. 			height: 110rpx;
  121. 		}
  122. 	}
  123.  
  124. 	.iconClose {
  125. 		width: 20rpx;
  126. 		height: 20rpx;
  127. 	}
  128. </style>

授权

    // 手动授权【摄像头】
    function getAuth() {
        // 获取摄像头权限
        uni.getSetting({
            success(res) {
                console.log("auth res", res);
                const authSetting = res.authSetting;
                if (authSetting['scope.camera'] ) {
                    // 已经授权
                    cameraEnable.value = true;
                } else {
                    // 未授权
                   
                    uni.authorize({
                        scope: 'scope.camera',
                        success(resSuccess) {
                            getAuthInfo()
                        },
                        fail(resFail) {
                            guideAuth()
                        }
                    });
                }
            }
        });
    }
    
    function guideAuth(chinastr){
        // 引导用户授权
        uni.showModal({
            title: '授权',
            content: '需要您授权获取摄像头权限',
            success: function(res) {
                if (res.confirm) {
                    uni.openSetting({
                        success(resOpenSetting) {
                            const authSetting = resOpenSetting.authSetting
                            if (authSetting && authSetting['scope.camera'] ) {
                                getAuthInfo()
                            } else {
                                uni.showToast({
                                    icon: 'none',
                                    title: '请授权所需权限',
                                    duration: 1500
                                });
                            }
                        }
                    });
                } else if (res.cancel) {
                    uni.showToast({
                        icon: 'none',
                        title: '您拒绝授权小程序获取摄像头权限',
                        duration: 1500
                    });
                }
            }
        });
    }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/274456
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号