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

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 = widththis.cvHeight = heightif (this.cvWidth > 350) {let rad = this.cvWidth / 350this.cvWidth = this.cvWidth / radthis.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.widthconst cHeight = obj.width > 250 ? 100 : obj.heightconst sNum = 5const 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)});},