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="reportBtn" class="report-btn">上报（{{ 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   水印相机
	 */
	export default {
		data() {
			return {
				w: '',
				h: '',
				photoMax: 4,
				date: "⏱️2024-08-15",
				time: "10:10:00",
				address: '北京 · 石景山',
				imgList: []
			}
		},
		onReady() {

		},
		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("左横屏");
						}
					});
				}
			})
		},
		watch: {

		},
		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)
							console.log(this.imgList)
						}
					}
				})
			},
			reportBtn() {
				this.imgList = [];



				uni.showToast({
					title: "处理成功"
				});
			},
		}
	}
</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>