微信小程序之通过Canvas生成图片保存到手机相册

最新推荐文章于 2024-07-31 13:57:35 发布

inticaler

最新推荐文章于 2024-07-31 13:57:35 发布

阅读量2k

点赞数 1

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

本文链接：https://blog.csdn.net/MICHAEL_PRINCE/article/details/111953973

版权

小程序专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在电商项目中利用微信小程序API动态创建包含个人小程序码的海报，并将其保存到本地相册。首先，通过wx.createCanvasContext绘制海报背景和二维码到canvas，然后使用canvasToTempFilePath保存为临时文件，最后调用saveImageToPhotosAlbum保存到相册。同时，还提供了在用户未授权相册权限时的处理策略。

摘要由CSDN通过智能技术生成

需求描述：

电商项目中有很多需要分享邀请的海报页面，需要带上自己的小程序码，并且保存在本地，然后分享到朋友圈。

解决方法：

将海报通过wx.createCanvasContext绘制到画布canvas组件。
使用canvasToTempFilePath将canvas海报保存到本地临时文件路径。
使用savelmageToPhotosAlbum将图片保存到本地相册。

定义海报内容图片

data: {
  isGetSet: true,
  poster_bg: '/images/invite_poster_bg.png',
  poster_qrcode: '/images/invite_poster_qrcode.png'
},

将海报通过wx.createCanvasContext绘制到画布canvas组件。

1.在wxml中添加canvas组件。

<canvas class='canvas-poster' canvas-id='canvasposter'></canvas>

2.绘制海报内容

drawPoster: function() {
    if(drawing){
      wx.showToast({
        title: '绘制中……',
        icon: 'loading',
        duration: 3000
      }) 
    }else{
      drawing = true;
      // loading 
      console.log('进入绘制')
      var ctx = wx.createCanvasContext('canvasposter');
      // ctx.clearRect(0, 0, 280, 450);
      /* 绘制背景*/
      ctx.rect(0, 0, 730, 1300);
      ctx.setFillStyle('black');
      ctx.fillRect(0, 0, 730, 1300);
      /*绘制产品图*/
      ctx.drawImage(this.data.poster_bg, 0, 0, 730, 1300);
      /*绘制二维码*/
      ctx.drawImage(this.data.poster_qrcode, 265, 725, 200, 200);
      ctx.restore();
      ctx.draw(false, this.getTempFilePath);
    }
    
},

使用canvasToTemprilePath将canvas海报保存到本地临时文件路径;

getTempFilePath: function() {
    wx.canvasToTempFilePath({
      canvasId: 'canvasposter',
      success: (res) => {
        this.saveImageToPhotosAlbum(res.tempFilePath)
      }
    })
},

使用savelmageToPhotosAlbum将图片保存到本地相册

saveImageToPhotosAlbum: function(imgUrl) {
    if (imgUrl) {      
      wx.saveImageToPhotosAlbum({
        filePath: imgUrl,
        success: (res) => {
          console.log(res)
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 3000
          })
          drawing = false
        },
        fail: (err) => {
          console.log(err)
          wx.showToast({
            title: '保存失败',
            icon: 'error',
            duration: 3000
          })
          drawing = false
        }
      })
    } else {
      wx.showToast({
        title: '绘制中……',
        icon: 'loading',
        duration: 3000
      })
    }
},

点击按钮保存海报到手机相册（判断是否获取相册授权，已获得权限直接绘制，若未获得权限，重新生成一个按钮点击需要用户重新授权）

saveImageToPhotos: function(e) {
    let that = this
    // 相册授权
    wx.getSetting({
      success(res) {
        // 进行授权检测，未授权则进行弹层授权
        console.log(res.authSetting)
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success () {
              that.drawPoster();
              that.setData({
                isGetSet: true
              })
            },
            // 拒绝授权时，在下载按钮上面增加打开手机设置按钮
            fail() {
              console.log('拒绝授权')
              that.setData({
                isGetSet: false
              })
            }
          })
        } else {
          // 已授权则直接进行保存图片
          that.setData({
            isGetSet: true
          })
          that.drawPoster();
        }
      },
      fail(res) {
        console.log(res);
      }
    })
},

到此，一个动态生成带有小程序码的海报下载流程就完成了。

完整案例