【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><button class="handle_card" open-type="share"><imageclass="handle_card_icon":src="require('./image/fx.png')"mode="widthFix"></image><view class="handle_card_name">分享</view></button></view></view>
</template>

js

开发者秘钥key自行填写，用于定位位置功能！
showToast和showLoading为自行封装的弹窗
如果没有直接用官网的uni.showToast

<script>
const mapSDK = new QQMapWX({key: "", //申请的开发者秘钥key
});
import { showToast, showLoading } from "@/js/common.js";
export default {data() {return {device: "back",flash: "",date: "",time: "",week: "",address: "",addressName: "",cameraWidth: 0,cameraHeight: 0,canvasWidth: 0,canvasHeight: 0,tempImagePath: "",timer: null,};},created() {const systemInfo = wx.getSystemInfoSync();const screenWidth = systemInfo.screenWidth;const screenHeight = systemInfo.screenHeight;const statusBarHeight = systemInfo.statusBarHeight;const menuButtonInfo = wx.getMenuButtonBoundingClientRect();const cameraWidth = screenWidth;uni.createSelectorQuery().select("#myContainer").boundingClientRect((rect) => {const cameraHeight =screenHeight -statusBarHeight -menuButtonInfo.height -(menuButtonInfo.top - systemInfo.statusBarHeight) * 2 -rect.height;this.cameraWidth = cameraWidth;this.cameraHeight = cameraHeight;this.getTime();this.getLocation();}).exec();},methods: {// 获取并更新时间的方法getTime() {this.timer = setInterval(() => {const timeData = this.formatTime();this.date = timeData.date;this.time = timeData.time;this.week = timeData.week;}, 1000);},// 获取并更新位置信息的方法getLocation() {uni.getLocation({success: (Locares) => {mapSDK.reverseGeocoder({location: {latitude: Locares.latitude,longitude: Locares.longitude,},get_poi: 1,success:(res)=> {this.address = res.address;}})})}})},// 拍摄事件takePhoto() {const ctx = uni.createCameraContext();ctx.takePhoto({quality: "high",success: (res) => {this.canvasWidth = res.width;this.canvasHeight = res.height;this.tempImagePath = res.tempImagePath;this.addWatermark(this.tempImagePath).then((addWatermark) => {uni.saveImageToPhotosAlbum({filePath: addWatermark,success: () => {showToast("保存成功");this.tempImagePath = "";},});}).catch((e) => {showToast(e);})}})},/*** 给图片添加水印*/addWatermark(imageUrl) {return new Promise((resolve, reject) => {showLoading("图片生成中...");const query = uni.createSelectorQuery();query.select("#canvas").fields({node: true,}).exec((res) => {const canvas = res[0].node;const ctx = canvas.getContext("2d");const { canvasWidth, canvasHeight } = this;canvas.width = canvasWidth;canvas.height = canvasHeight;// 绘制背景图片const image = canvas.createImage();image.src = imageUrl;image.onload = () => {const sizeX = this.canvasWidth / 375;ctx.drawImage(image, 0, 0);ctx.font = `${35 * sizeX}px 黑体`;ctx.fillStyle = "#ffffff";ctx.textBaseline = "bottom";// 绘制时间ctx.fillText(this.time, 10 * sizeX, canvasHeight - 30 * sizeX);const timeWidth = ctx.measureText(this.time).width;// 绘制边框线条ctx.beginPath();ctx.lineCap = "round";ctx.moveTo(timeWidth + 16 * sizeX, canvasHeight - 59 * sizeX);ctx.lineTo(timeWidth + 16 * sizeX, canvasHeight - 36 * sizeX);ctx.lineWidth = 3 * sizeX;ctx.strokeStyle = "#7FCAF4";ctx.stroke();// 绘制年月日ctx.font = `${12 * sizeX}px 黑体`;ctx.fillText(this.date,timeWidth + 22 * sizeX,canvasHeight - 49 * sizeX);// 绘制周几ctx.fillText(this.week,timeWidth + 22 * sizeX,canvasHeight - 34 * sizeX);// 绘制地址ctx.font = `${14 * sizeX}px 黑体`;ctx.fillText(this.address, 10 * sizeX, canvasHeight - 10 * sizeX);uni.canvasToTempFilePath({canvas,success: (res) => {uni.hideLoading();console.log(canvas, res.tempFilePath, 199);resolve(res.tempFilePath);},fail: (e) => {uni.hideLoading();reject(new Error(JSON.stringify(e)));},});};});});},/*** 切换摄像头*/setDevice() {this.device = this.device === "back" ? "front" : "back";const text = this.device === "back" ? "后置" : "前置";showToast(`摄像头${text}`)},/*** 闪光灯开关*/setFlash() {this.flash = this.flash === "torch" ? "off" : "torch";},/*** 选择位置信息*/chooseLocation() {uni.chooseLocation({success: (res) => {this.address = res.address;},fail(err) {console.log(err);},});},formatTime() {const date = new Date();const year = date.getFullYear();const month = date.getMonth() + 1;const day = date.getDate();const weekDay = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];const hour = date.getHours();const minute = date.getMinutes();// const second = date.getSeconds(); 如果需要秒显示，自行修改const formatNumber = (n) => {const s = n.toString();return s[1] ? s : "0" + s;};return {date: [year, month, day].map(formatNumber).join("-"),time: [hour, minute].map(formatNumber).join(":"),week: "星期" + weekDay,};},},
};
</script>

sass样式

<style lang="scss">
.handle {position: fixed;bottom: 0;width: 100%;height: 15%;display: flex;justify-content: space-around;align-items: center;font-size: 28rpx;background: rgb(255, 255, 255);padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}.handle_ps,
.handle_card {display: flex;flex-direction: column;text-align: center;height: 75px;line-height: 25px;background: #ffffff;padding: 0;font-size: 25rpx;
}
.handle_ps {&::after {border: none;}
}
.handle_card::after {border: none;
}
.handle_ps_image {width: 50px;height: 50px;
}
.handle_card_name {font-size: 25rpx;
}.handle_card_icon {width: 40px;height: 40px;margin: 5px;
}
.watermark {position: fixed;bottom: 16%;left: 10px;color: #fff;
}
.location_box {display: flex;line-height: 25px;height: 25px;
}
.time {display: flex;.times-r {position: relative;font-size: 75rpx;padding-right: 25rpx;&::before {content: "";position: absolute;width: 6rpx;height: 53%;border-radius: 10rpx;background: #7fcaf4;right: 8rpx;top: 50%;transform: translateY(-50%);}}.times-date {padding-left: 5rpx;display: flex;flex-direction: column;justify-content: center;font-size: 24rpx;.year-date,.weeks-date {display: block;}}
}
.time,
.location {color: #fff;
}
</style>

感谢你的阅读，如对你有帮助请收藏+关注！
只分享干货实战和精品，从不啰嗦！！！
如某处不对请留言评论，欢迎指正~
博主可收徒、常玩QQ飞车，可一起来玩玩鸭~