微信小程序上传图片添加水印

最新推荐文章于 2025-03-25 16:15:14 发布

Wudq0601

最新推荐文章于 2025-03-25 16:15:14 发布

阅读量641

点赞数 4

分类专栏：小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_38468358/article/details/143091873

版权

微信小程序使用wx.chooseMedia拍摄或从手机相册中选择图片并添加水印，

代码如下：

// WXML代码：

<canvas canvas-id="watermarkCanvas" style="width: {
  {canvasWidth}}px; height: {
  {canvasHeight}}px;"></canvas>
<button bindtap="addWatermark">选择图片并添加水印</button>

// js代码：

data: {
    canvasWidth: 0,
    canvasHeight: 0

},

addWatermark() {
    // 是否清空页面上的视觉效果
    this.setData({
      canvasWidth: 0,
      canvasHeight: 0
    });

    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePath = res.tempFiles[0].tempFilePath;
        wx.getImageInfo({
          src: tempFilePath,
          success: (imageInfo) => {
            // 获取屏幕