【Uniapp微信小程序】自定义水印相机、微信小程序地点打卡相机

效果图

在这里插入图片描述

template

下方的image图片自行寻找替换！

<template><view><camerav-if="!tempImagePath && cameraHeight !== 0":resolution="'high'":frame-size="'large'":device-position="device":flash="flash":style="{position: 'fixed',top: '0',width: cameraWidth + 'px',height: cameraHeight + 'px',}"></camera><imagev-else:src="tempImagePath"mode="widthFix"style="width: 100%"></image><view class="watermark" v-if="cameraHeight !== 0"><view class="time"><text class="times-r">{{ time }}</text><text class="times-date"><text class="year-date">{{ date }}</text><text class="weeks-date">{{ week }}</text></text></view><view class="location_box"><view class="location">{{ address }}</view></view></view><canvastype="2d"id="canvas":style="{position: 'fixed',top: '-10000px',left: '-10000px',width: canvasWidth + 'px',height: canvasHeight + 'px',}"></canvas><view class="handle" id="myContainer"><button class="handle_card" @click="chooseLocation"><imageclass="handle_card_icon":src="require('./image/wz.png')"mode="widthFix"></image><view class="handle_card_name">定位</view></button><button class="handle_card" @click="setDevice"><imageclass="handle_card_icon":src="require('./image/qh.png')"mode="widthFix"></image><view class="handle_card_name">切换</view></button><button class="handle_ps" @click="takePhoto"><imageclass="handle_ps_image":src="require('./image/ps.png')"mode="widthFix"></image><view class="handle_ps_name">拍摄</view></button><button class="handle_card" @click="setFlash"><imageclass="handle_card_icon":src="require('./image/sd.png')"mode="widthFix"></image><view class="handle_card_name">闪光</view></button>