中卫市住房和城乡建设局网站网站设计的公司
在微信小程序开发过程中，我们常常需要在图片上添加水印，以保护版权或增加个性化元素。本文将为大家介绍如何在微信小程序中为图片添加时间水印，让你的小程序更具特色。
实现步骤：
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);});}
});
运行效果：
在微信开发者工具中预览uploadWatermark页面。点击“选择图片”按钮，用户可以选择从相册或相机上传图片。上传后，图片将显示在页面上，并且会添加当前时间水印。
总结：
通过以上步骤，我们实现了在微信小程序中允许用户上传图片并添加时间水印的功能。这个功能不仅实用，而且可以增强用户体验。希望这个教程对你在开发微信小程序时有所帮助！