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

最新推荐文章于 2024-01-08 13:04:45 发布

原创

最新推荐文章于 2024-01-08 13:04:45 发布 · 2.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #canvas

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

需求描述：

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

解决方法：

将海报通过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,