uniapp拍照添加水印app端

### 实现拍照并添加水印 在 UniApp 中实现拍照功能主要依赖于 `uni.chooseImage` 或者 `uni.camera` API 来获取图像资源[^1]。对于添加水印的操作，则可以通过 Canvas 组件来完成文字或图案叠加到所选图片之上。 #### 获取照片 为了从设备摄像头捕获一张新拍摄的照片，可以调用如下代码片段所示的方法： ```javascript // 调起相机进行拍照 uni.camera({ success: function (res) { const tempFilePath = res.tempImagePath; console.log('temp file path:', tempFilePath); addWatermark(tempFilePath); // 将返回的临时文件路径传递给加水印函数处理 } }); ``` #### 添加水印至图片 创建一个隐藏 canvas 元素用于绘制原始图像以及附加的文字说明作为水印效果。下面是一个简单的例子展示如何操作： ```html <canvas type="2d" id="watermarkCanvas"></canvas> <button @click="handleAddWaterMark">拍张照并加水印</button> <img :src="resultImgSrc"/> ``` ```javascript export default { data() { return { resultImgSrc: '' }; }, methods: { handleAddWaterMark() { uni.camera({ success: async (res) => { let ctx = uni.createCanvasContext('watermarkCanvas'); await drawImageWithText(ctx, res.tempImagePath); this.resultImgSrc = await convertCanvasToImage(); } }); } } } function drawImageWithText(context, imagePath){ context.drawImage(imagePath, 0, 0, 375, 667); context.setFontSize(20); context.setFillStyle('#ffffff'); // 设置字体颜色为白色 context.fillText("©️ Your Company Name", 20, 640); // 在指定位置写入版权信息或其他自定义文本 context.draw(); // 执行绘图命令 } async function convertCanvasToImage(){ try{ var imgDataUrl = await new Promise((resolve,reject)=>{ setTimeout(()=>{ uni.canvasToTempFilePath({ x: 0, y: 0, width: 375, height: 667, destWidth: 375 * 2, destHeight: 667 * 2, canvasId: 'watermarkCanvas', success(res){ resolve(res.tempFilePath)}, fail(err){ reject(err)} }) },100) }); return imgDataUrl; }catch(error){ console.error("Failed to save image:", error.message); } } ``` 此段代码实现了通过点击按钮触发拍照行为，在获得照片之后将其显示在一个 `<img>` 标签内，并且在此之前已经对该图片进行了加工——即在其上面加上了一行白色的 "©️ Your Company Name" 文字作为水印[^2]。