uniApp实战二：仿今日相机水印功能

文章目录

• 1.最终效果预览
• 2.页面实现

1.最终效果预览

2.页面实现

页面布局

<view @click="handleTakePhotoNew">拍照</view>
			<view v-if="!snapSrc">
				<canvas canvas-id="canvas" :style="{'width':cvWidth+'px','height':cvHeight+'px'}">
				</canvas>
			</view>
			<view v-else>
				<image :style="{'width':cvWidth+'px','height':cvHeight+'px'}" mode="aspectFit" :src="snapSrc">
				</image>
			</view>

data定义

data() {
			return {
				snapSrc: "",
				cvHeight: "",
				cvWidth: "",
				tKey: "时 间:",
				addKey: "地 点:",
			};
		},

点击事件及方法

handleTakePhotoNew() {
				this.snapSrc = ""
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const imgPath = res.tempFilePaths[0]
						this.getWaterImageNew(imgPath)
					}
				});

			},


			async getWaterImageNew(imgPath) {
				const {
					width,
					height
				} = await this.getImageSizeByUrl(imgPath);
				this.cvWidth = width
				this.cvHeight = height
				if (this.cvWidth > 350) {
					let rad = this.cvWidth / 350
					this.cvWidth = this.cvWidth / rad
					this.cvHeight = this.cvHeight / rad
				}

				const obj = {
					url: imgPath,
					title: '日常巡检',
					time: '2025-03-03 22:22',
					address: "详细地址信息XXX",
					width: this.cvWidth,
					height: this.cvHeight
				}
				this.snapSrc = await this.imageAddWatermarksNew(obj)
			},


			async imageAddWatermarksNew(obj) {
				try {
					const waterUrl = await this.imgToCanvasNew(obj);
					return waterUrl
				} catch (error) {
					console.error(error);
				}
			},

			getImageSizeByUrl(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: function(res) {
							resolve({
								width: res.width,
								height: res.height,
							});
						},
						fail: function(err) {
							reject(new Error("getImageSizeByUrl load fail"));
						}
					})
				})
			},


			imgToCanvasNew(obj) {
				return new Promise((resolve, reject) => {
					const cWidth = obj.width > 250 ? 200 : obj.width
					const cHeight = obj.width > 250 ? 100 : obj.height
					const sNum = 5
					const fbottom = obj.height - sNum * 6;
					const halfH = sNum * 4;
					const ctx = uni.createCanvasContext("canvas");
					ctx.clearRect(0, 0, obj.width, obj.height);
					ctx.drawImage(obj.url, 0, 0, obj.width, obj.height);
					const grd = ctx.createLinearGradient(0, 0, cWidth, 0);
					grd.addColorStop(0, "#4169E1");
					grd.addColorStop(1, "#87CEFA");
					ctx.fillStyle = grd;
					ctx.fillRect(sNum * 2, fbottom - halfH * 4, cWidth, halfH * 2);
					ctx.font = "italic normal bold 25px arial";
					ctx.setFillStyle("#FFFFFF");
					ctx.setTextAlign('center')
					ctx.fillText(obj.title, cWidth / 2+sNum*2, fbottom - halfH * 2 - sNum * 2);
					ctx.fillStyle = "rgba(245,245,245,0.5)";
					ctx.fillRect(sNum * 2, fbottom - halfH * 2, cWidth, halfH * 2 + sNum);
					ctx.setTextAlign('start')
					ctx.setFontSize(sNum * 3);
					ctx.setFillStyle("#000000");
					ctx.fillText(this.tKey + obj.time, sNum * 3, fbottom - halfH);
					ctx.fillText(this.addKey + obj.address, sNum * 3, fbottom);
					setTimeout(() => {
						ctx.draw(false, async () => {
							uni.canvasToTempFilePath({
									canvasId: "canvas",
									fileType: "jpg",
									success: (res) => {
										resolve(res.tempFilePath)
									},
									fail: (err) => {
										reject(err);
									},
								},
								true
							);
						});
					}, 1000)
				});
			},