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

本文链接：https://blog.csdn.net/Jiaberrr/article/details/142452098

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

实现步骤：

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);
    });
  }
});