教你一招：在微信小程序中为用户上传的图片添加时间水印

在微信小程序开发过程中，我们常常需要在图片上添加水印，以保护版权或增加个性化元素。本文将为大家介绍如何在微信小程序中为图片添加时间水印，让你的小程序更具特色。

实现步骤：

1. 创建页面结构

在pages目录下创建一个名为uploadWatermark的文件夹，并在该文件夹中创建以下四个文件：uploadWatermark.wxml、uploadWatermark.wxss、uploadWatermark.js和uploadWatermark.json。

2. 编写`uploadWatermark.wxml`

<view class="container"><button bindtap="chooseImage">选择图片</button><image src="{{watermarkedImage}}" mode="aspectFit" class="watermarked-image" wx:if="{{watermarkedImage}}"></image>
</view>
<canvas canvas-id="watermarkCanvas" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;"></canvas>

3、编写`uploadWatermark.wxss`

.container {position: relative;width: 100%;
}button {margin: 20px;
}.watermarked-image {width: 100%;
}

4、编写`uploadWatermark.js`

Page({data: {watermarkedImage: '', // 添加水印后的图片},// 选择图片chooseImage: function() {const that = this;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {// tempFilePaths是选择的图片的本地临时文件路径列表that.addTimeWatermark(res.tempFilePaths[0]);}})},// 添加时间水印addTimeWatermark: function(imagePath) {const ctx = wx.createCanvasContext('watermarkCanvas', this);ctx.drawImage(imagePath, 0, 0, 300, 150); // 假设图片大小为300x150，根据实际情况调整// 设置水印文字const time = new Date().toLocaleString();ctx.setFontSize(14);ctx.setFillStyle('rgba(255, 255, 255, 0.5)'); // 半透明白色ctx.setTextAlign('right');ctx.fillText(time, 290, 140); // 根据实际情况调整位置// 绘制水印ctx.draw(false, () => {wx.canvasToTempFilePath({canvasId: 'watermarkCanvas',success: (res) => {this.setData({watermarkedImage: res.tempFilePath});},fail: (err) => {console.error(err);}}, this);});}
});