uniapp手机截图加水印

### 实现手机截屏图片添加水印功能 在 UniApp 中实现对手机截屏图片添加水印的功能涉及多个步骤，主要包括获取屏幕截图、创建画布以及绘制水印。为了确保用户体验良好，可以采用隐藏的 HTML5 Canvas 来处理图像操作。 #### 获取屏幕截图 通过调用 `plus.nativeObj.Screen` API 可以轻松捕获当前页面的内容作为图片文件。此方法返回的是本地路径字符串形式的结果[^1]。 ```javascript function captureScreen() { plus.nativeObj.Screen.captureScreenshot(function(result) { const imagePath = result.path; addWatermarkToImage(imagePath); }); } ``` #### 创建带有水印效果的Canvas 定义一个 CSS 类来控制用于渲染最终带水印图像的不可见 canvas 的样式： ```css .watermark-canvas { transform: scale(1); transform-origin: 0 0; position: absolute; top: -999px; left: -999px; } ``` 接着，在 JavaScript 中动态生成该 canvas 并加载原始截图到其中: ```html <canvas id="watermarkCanvas" class="watermark-canvas"></canvas> ``` ```javascript function createWatermarkedCanvas(originalImagePath, watermarkText) { let canvas = document.getElementById('watermarkCanvas'); let ctx = canvas.getContext('2d'); // 加载原图 let img = new Image(); img.src = originalImagePath; img.onload = function () { canvas.width = img.width; canvas.height = img.height; // 绘制原图至canvas上 ctx.drawImage(img, 0, 0); // 设置字体大小和颜色 ctx.font = "bold 30px Arial"; ctx.fillStyle = "#FFFFFF"; // 白色文字 // 计算文本位置并绘制水印 let textWidth = ctx.measureText(watermarkText).width; let xPosition = (img.width / 2) - (textWidth / 2); let yPosition = img.height - 40; ctx.globalAlpha = 0.7; // 半透明度 ctx.fillText(watermarkText, xPosition, yPosition); saveOrShowResult(canvas.toDataURL()); }; } ``` 最后一步是保存或展示已添加好水印后的图像数据URL给用户查看或分享。 ```javascript function saveOrShowResult(dataUrl){ // 这里可以根据实际需求决定是要预览还是直接下载/上传服务器等动作 console.log("已完成加水印:", dataUrl); // 预览方式之一：插入新的<img>标签显示出来 var previewImg=document.createElement("IMG"); previewImg.setAttribute("src",dataUrl); document.body.appendChild(previewImg); } ```