附示例代码详解(水印图片文字画布绘制)

一、实现思路

在小程序中，为图片添加文字水印的实现主要通过以下步骤：

以下是一个完整的实现代码示例，通过在小程序中使用Canvas API为图片添加文字水印。

首先，在页面的 .wxml 文件中，增加一个 canvas 组件用于绘制图片和水印。

<!-- index.wxml --><view class="container"> <canvas canvas-id="watermarkCanvas" style="width: 100%; height: 300px;"></canvas> <button bindtap="addWatermark">添加水印</button> <image wx:if="{{watermarkedImage}}" src="{{watermarkedImage}}" style="width: 100%; height: 300px;"></image></view>2. 样式文件

设置一些基础的样式。

/ index.wxss /.container { padding: 20px;}button { margin-top: 20px;}3. 页面逻辑

在页面的 .js 文件中，实现核心逻辑。

// index.jsPage({ data: { watermarkedImage: '' // 存储生成的水印图片路径 }, // 添加水印方法 addWatermark() { const ctx = wx.createCanvasContext('watermarkCanvas'); // 创建 canvas 上下文 const imageUrl = 'https://example.com/image.jpg'; // 示例图片URL，可替换为实际图片地址 const watermarkText = 'Watermark Text'; // 水印文字内容 // 下载图片 wx.getImageInfo({ src: imageUrl, success: (res) => { const { width, height } = res; // 设置 canvas 尺寸 this.setData({ canvasWidth: width, canvasHeight: height }); // 绘制图片 ctx.drawImage(res.path, 0, 0, width, height); // 设置字体样式 ctx.setFontSize(30); ctx.setFillStyle('rgba(255,255,255,0.5)'); ctx.setTextAlign('right'); // 绘制水印文本 ctx.fillText(watermarkText, width - 10, height - 20); // 导出图片 ctx.draw(false, () => { wx.canvasToTempFilePath({ canvasId: 'watermarkCanvas', success: (result) => { this.setData({ watermarkedImage: result.tempFilePath // 设置水印图片路径 }); }, fail: (error) => { console.error('导出图片失败', error); } }); }); }, fail: (error) => { console.error('下载图片失败', error); } }); }});三、实现步骤解析1. 获取原始图片

通过 wx.getImageInfo 方法获取原始图片的信息，包括图片的 path、width 和 height。

wx.getImageInfo({ src: imageUrl, success: (res) => { // 获取图片信息成功 }, fail: (error) => { console.error('下载图片失败', error); }});2. 创建 Canvas 画布

使用 wx.createCanvasContext 方法创建 Canvas 上下文，并通过 drawImage 方法将图片绘制到画布上。

const ctx = wx.createCanvasContext('watermarkCanvas');ctx.drawImage(res.path, 0, 0, res.width, res.height);3. 绘制水印文字

通过 Canvas API 的 fillText 方法在画布上绘制水印文字，同时可以设置字体大小、颜色和对齐方式。

ctx.setFontSize(30);ctx.setFillStyle('rgba(255,255,255,0.5)');ctx.setTextAlign('right');ctx.fillText(watermarkText, res.width - 10, res.height - 20);4. 导出图片

使用 wx.canvasToTempFilePath 方法将 Canvas 内容导出为图片文件，生成水印图片。

ctx.draw(false, () => { wx.canvasToTempFilePath({ canvasId: 'watermarkCanvas', success: (result) => { this.setData({ watermarkedImage: result.tempFilePath }); }, fail: (error) => { console.error('导出图片失败', error); } });});四、注意事项图片路径：确保图片路径正确，可以是远程图片或本地图片。
字体样式：根据需求调整字体大小、颜色和透明度，确保水印效果最佳。
性能优化：如图片较大，可以适当调整 Canvas 大小和导出图片质量，避免性能问题。
结论

通过本文的详细解析，我们深入探讨了在小程序中为图片添加文字水印的实现思路和完整的示例代码。
从获取原始图片、创建画布到绘制水印和导出图片，每一步都详细展示了具体实现方法。
希望这些内容能帮助你在小程序开发中，高效实现图片添加文字水印的需求。

小程序开发中，为图片添加水印是一项实用技能，掌握了这一技巧，可以让你的应用更加专业和安全。
希望本文能为你带来实用的技术知识，让你在小程序开发中更加游刃有余。
如果你觉得本文对你有帮助，请点赞分享，让更多人了解如何在小程序中为图片添加文字水印，一起学习，共同进步！