uniapp 微信小程序生成水印图片

效果

源码

<template><view style="overflow: hidden;"><camera device-position="back" flash="auto" class="camera"><cover-view class="text-white padding water-mark"><cover-view class="">{{ address }}</cover-view><cover-view class="margin-top-sm">{{ date }} {{ time }}</cover-view></cover-view><cover-view class="camera-btn" @click="takePhoto"></cover-view><cover-view class="flex justify-between align-center photos-bar" v-if="imgList.length > 0"><cover-view class="photos-swiper"><cover-view @click="viewImage(index)" class="margin-right-xs imgBox" v-for="(item,index) in imgList":key="index"><cover-image class="imgItem" :src="item.src" mode="aspectFill"></cover-image><cover-view class="del-icon" @tap.stop="delImg">❌</cover-view></cover-view></cover-view><cover-view @click="report" class="report-btn">{{ reportBtnName }}（{{ imgList.length }}）</cover-view></cover-view></camera><canvas :style="{ width: w + 'px', height: h + 'px' }" canvas-id="canvas-photo"></canvas></view>
</template><script>/*** @author        全易* @time          2024-08-15 10:10:00* @description   水印相机* @param {photoMax}   			最多拍几张* @param {reportBtnName}   上报摁扭的名称* @use	父页面这样跳：uni.navigateTo({url: "/components/watermark-camera",events: {getImages(data) {console.log("水印相机的照片：", data)}}})*/export default {data() {return {w: '',h: '',photoMax: 4,reportBtnName: "上报",date: "⏱️2024-08-15",time: "10:10:00",address: '📍北京 · 石景山',imgList: []}},onLoad(options) {this.photoMax = options.photoMax || 4;this.reportBtnName = options.reportBtnName || "上报";},onShow() {// uni.getSystemInfo({// 	success: function(res) {// 		if (res.windowWidth > res.windowHeight) {// 			console.log("横屏");// 		} else {// 			console.log("竖屏");// 		}// 	}// })// uni.startAccelerometer({// 	interval: 'game',// 	success() {// 		console.log("启用加速针：", e);// 		uni.onAccelerometerChange(function(res) {// 			console.log("加速针数据：", res);// 		})// 	}// })// uni.startGyroscope({// 	success(e) {// 		console.log("启用陀螺仪：", e);// 		uni.onGyroscopeChange((res) => {// 			console.log("陀螺仪数据：", res);// 		});// 	}// })wx.startDeviceMotionListening({success: (e) => {console.log("监听设备方向：", e);wx.onDeviceMotionChange((res) => {// console.log("设备方向：", res)const alpha = res.alpha;const beta = res.beta;const gamma = res.gamma;console.clear()if (Math.abs(beta) < 10 && Math.abs(gamma) < 10) {console.log("正竖屏");} else if (Math.abs(beta) > 170 && Math.abs(gamma) < 10) {console.log("倒竖屏");} else if (Math.abs(beta) < 10 && Math.abs(gamma - 90) < 10) {console.log("右横屏");} else if (Math.abs(beta) < 10 && Math.abs(gamma + 90) < 10) {console.log("左横屏");}});}})},methods: {// 拍照takePhoto() {if (this.imgList.length === this.photoMax) {return uni.showToast({icon: "error",title: `最多可拍${this.photoMax}张`});}const that = this;const ccc = uni.createCameraContext();ccc.takePhoto({quality: 'high',success: (res) => {console.log("拍照：", res);that.createWatermark(res.tempImagePath);}});},// 生成水印createWatermark(image) {const that = this;uni.getImageInfo({src: image,success: res => {that.w = res.width / 3;that.h = res.height / 3.01;const ctx = uni.createCanvasContext('canvas-photo');//将图片src放到cancas内，宽高为图片大小ctx.drawImage(image, 0, 0, that.w, that.h);ctx.setFontSize(12);ctx.setFillStyle('#FFFFFF');// ctx.rotate(30 * Math.PI / 180);const textToWidth = that.w * 0.03;ctx.fillText('全易', textToWidth, that.h * 0.9);ctx.setFontSize(10);ctx.fillText(that.address, textToWidth, that.h * 0.98);ctx.fillText(`${that.date} ${that.time}`, textToWidth, that.h * 0.94);ctx.draw(false, () => {setTimeout(() => {uni.canvasToTempFilePath({canvasId: 'canvas-photo',success: ctf => {console.log(ctf.tempFilePath);this.imgList.push({src: ctf.tempFilePath})console.log(this.imgList);}});}, 1000);});}});},// 查看照片viewImage(index) {uni.previewImage({current: index,urls: this.imgList.map(item => {return item.src})});},delImg(e) {uni.showModal({title: '删除提醒',content: '确定要删除这张照片吗？',success: res => {if (res.confirm) {this.imgList.splice(e.currentTarget.dataset.index, 1);}}});},// 上报父页面report() {const that = this;uni.navigateBack({success() {const eventChannel = that.getOpenerEventChannel();eventChannel.emit('getImages', {images: that.imgList});}});}}}
</script><style scoped lang="scss">.camera {width: 100vw;height: 100vh;}.water-mark {}.camera-btn {width: 120rpx;height: 120rpx;line-height: 120rpx;border: 6rpx #FFFFFF solid;border-radius: 50%;padding: 8rpx;position: absolute;left: calc(50% - 60rpx);bottom: 210rpx;&::after {content: " ";display: block;width: 89%;height: 89%;position: absolute;top: 5%;left: 5%;border-radius: 50%;background-color: #FFFFFF;}}.photos-bar {width: 100%;height: 170rpx;box-sizing: border-box;padding: 20rpx 30rpx 40rpx;position: absolute;bottom: 0;left: 0;background-color: rgba(0, 0, 0, .8);.photos-swiper {width: 80%;overflow-x: auto;height: -webkit-fill-available;.imgBox {width: 110rpx;height: 110rpx;position: relative;display: inline-block;.del-icon {position: absolute;right: 0;top: 0;padding: 2px;background-color: rgba(0, 0, 0, 0.5);}.imgItem {width: 110rpx;height: 110rpx;}}}.report-btn {height: 68rpx;line-height: 68rpx;text-align: center;color: #FFFFFF;box-sizing: border-box;padding: 0rpx 20rpx;border-radius: 10rpx;background-color: #2157FF;}}#canvas-photo {position: fixed;top: -999999px;}
</style>