uni-app给手机拍照加水印

### 实现 uni-app 应用中照片添加水印功能 为了实现在 `uni-app` 中对手机拍摄的照片添加水印，可以采用 HTML5 的 Canvas API 来绘制图像并添加文字或图形作为水印。考虑到 iOS 设备对于大尺寸图片的支持有限制，因此需要先检测图片大小并对超出限定范围的图片进行等比例缩放处理[^1]。 #### 获取相机权限与拍照 通过调用 `uni.chooseImage()` 或者更推荐的方式是使用组件 `<camera>` 和 `<cover-view>` 结合来获取用户授权以及捕捉到的照片数据： ```html <template> <view class="content"> <!-- Camera Component --> <camera device-position="back" flash="off" @error="handleError"></camera> <button type="primary" bindtap="takePhoto">拍 照</button> <!-- Display the photo with watermark here --> <image :src="watermarkedImageUrl" mode="widthFix"></image> </view> </template> ``` 当用户点击按钮触发拍照事件后，在 JavaScript 方法里接收返回的数据流，并将其转换成 base64 编码字符串以便后续操作。 #### 图片预处理（压缩） 由于部分移动操作系统存在内存限制，所以有必要预先判断所选文件分辨率是否过高而采取相应措施——即按一定比率缩小原始图样直至满足条件为止。这一步骤能够有效防止因资源占用过多而导致程序崩溃的情况发生。 ```javascript methods: { takePhoto() { const ctx = wx.createCameraContext(); ctx.takePhoto({ quality: 'high', success:async (res) => { let tempFilePath = res.tempImagePath; // Check image size and resize if necessary before adding watermarks. await this.resizeIfNecessary(tempFilePath).then((resultPath)=>{ this.addWatermark(resultPath); }); } }) }, async resizeIfNecessary(filePath){ return new Promise((resolve, reject)=>{ uni.getImageInfo({ src: filePath, success:(info)=>{ const maxWidthHeight = Math.max(info.width, info.height); if(maxWidthHeight > 1365){ const ratio = 1365 / maxWidthHeight; uni.compressImage({ src:filePath, quality:80, width:parseInt(ratio * info.width), height:parseInt(ratio * info.height), success(resizedData)=>{ resolve(resizedData.tempFilePath)} }); }else{ resolve(filePath); } },fail:error=>reject(error) }); }); }, } ``` #### 使用 Canvas 绘制带水印的新图片 创建一个隐藏 canvas 元素用于合成最终效果。将调整好后的原图加载至该上下文中渲染出来之后再叠加一层透明度较低的文字层面上去形成完整的带有标记的作品。 ```javascript addWatermark(imageSrc) { return new Promise(async(resolve,reject)=>{ try{ const query = uni.createSelectorQuery().in(this); var canvasDom = null; function createCanvas(width,height){ const c = document.createElement('canvas'); c.width=width; c.height=height; return c; } // Get Image Info Again For Accurate Size After Compression const imgInfo =await new Promise((rs,rj)=> uni.getImageInfo({src:imageSrc},(data,err)=>err?rj(err):rs(data)) ); const {width:imgW,height:imgH}=imgInfo; // Create Offscreen Canvas And Draw Original Photo First const offScreenCtx=createCanvas(imgW,imgH).getContext('2d'); const img=new Image(); img.src=imageSrc; img.onload=()=>{ offScreenCtx.drawImage(img,0,0); // Add WaterMark Text Here With Desired Style Options offScreenCtx.font='bold 40px sans-serif'; offScreenCtx.fillStyle='#FFFFFF';// White Color As An Example offScreenCtx.globalAlpha=.7;// Set Transparency Level Between 0 To 1 // Calculate Position Based On Your Needs const textX=(imgW-offScreenCtx.measureText("Your Water Mark").width)/2; const textY=imgH-(imgH*0.05); offScreenCtx.fillText("Your Water Mark",textX,textY); // Convert The Final Result Back Into Base64 String Format Or Save It Directly Depending On Requirements this.watermarkedImageUrl = offScreenCtx.canvas.toDataURL('image/jpeg', .92); resolve(true); }; }catch(e){ console.error(e.message); reject(false); } }); } ``` 上述代码片段展示了如何利用 UniApp 提供的能力完成从捕获相片到最后生成含有所需标志版本的一系列流程。值得注意的是实际项目开发过程中可能还需要考虑更多细节比如不同平台间的兼容性差异等问题。