微信小程序canvas生成图片并保存

最新推荐文章于 2024-05-28 10:49:19 发布

sunshine641

最新推荐文章于 2024-05-28 10:49:19 发布

阅读量1.3k

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/sunshine641/article/details/131663390

版权

需求：

做一个类似下图的功能。图片内容是动态的，用canvas画出来，生成临时图片，再保存。

实现：

<view class="canvasBox">
   <canvas canvas-id="myCanvas" class="myCanvas"></canvas>
</view>

<view class="groupBtn" >
     <van-button type="default" bind:click="saveImage">保存图片</van-button>
</view>

ImageDraw(){
  
  // 通过canvasAPI绘制   参考canvas文档使用
    const ctx = wx.createCanvasContext('myCanvas');

//绘制背景图   图片地址可以使网络地址、本地地址
    ctx.drawImage('../../images/invite.png', 0, 0, 320, 475);
    ctx.save();

//绘制背景图上二维码
    ctx.fillStyle="#FFFFFF";
    ctx.fillRect(110, 327, 104, 104 );
    ctx.lineCap="round";
    ctx.clip();
    ctx.drawImage('../../images/image14.png', 113, 330, 98, 98);
 
    ctx.restore();
    ctx.stroke()
    ctx.draw()
  },


  //保存群图片
  saveImage(){
   
   //生成临时图片
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      width: 320,
      height: 475,
      success: function (res) {

        //tempFilePath为生成的临时地址
        console.log(res.tempFilePath,'saveImageToPhotosAlbum')

        //保存到相册
        wx.saveImageToPhotosAlbum({
          filePath:res.tempFilePath,
          success(res) {
            wx.showToast({
              title:'保存成功'
            })
          },
          fail(err){
            wx.showToast({
              title:err.errMsg
            })
          }
        })
      }, fail: function(err) {
        wx.showToast({
          title:err.errMsg
        })
      }
    })
  },

其他使用，查看微信开发文档