微信小程序canvas生成图片并保存-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序canvas生成图片并保存。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：

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

小程序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
        })
      }
    })
  },

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

文章来源地址https://www.toymoban.com/news/detail-641493.html

到了这里，关于微信小程序canvas生成图片并保存的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！