小程序-生成海报并保存到手机相册

48 阅读 0 评论 32 点赞

我是靠谱客的博主懦弱树叶，最近开发中收集的这篇文章主要介绍小程序-生成海报并保存到手机相册，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

index.js

  bindSave: function() {
    let that = this;
    wx.downloadFile({
      url: 'https://xxxx', //头像
      success: (res) => {
        that.setData({
          headimgFiles: res.tempFilePath
         })
        }
    })
    wx.showLoading({
      title: '正在保存图片',
    });
    //先创建一个画布
    var ctx = wx.createCanvasContext("poster")
    //填充背景色
    wx.downloadFile({
      url: 'https://xxxx.jpg',  //二维码地址
      success: (res) => {
        console.log('downloadFile成功')
        ctx.drawImage("aaaaa.png", 0, 0, 960, 1200);//背景
        ctx.setFontSize(153);
        ctx.fillStyle = '#FFE401';
        ctx.fillText(that.data.moneyNumber + '元', that.data.canvasMoneyLeft * that.data.windowWidth, 340 * that.data.windowWidth);
        ctx.save();
        ctx.beginPath();
        ctx.arc(33 * that.data.windowWidth + 74, 39 * that.data.windowWidth + 74, 74, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(that.data.headimgFiles, 33 * that.data.windowWidth, 39 * that.data.windowWidth, 148, 148);
        ctx.restore();
        ctx.save();  //圆形头像
        ctx.beginPath();
        ctx.arc(350 * that.data.windowWidth + 144, 475 * that.data.windowWidth + 144, 144, 0, Math.PI * 2, false);
        ctx.clip();
        ctx.drawImage(res.tempFilePath, 350 * that.data.windowWidth, 475 * that.data.windowWidth, 284, 284);
        ctx.restore(); //圆形二维码
        ctx.draw(false, function() {
          console.log('draw成功')
          wx.canvasToTempFilePath({
            canvasId: 'poster',
            success: function(res) {
              console.log('canvasToTempFilePath成功')
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  console.log(res)
                  wx.hideLoading();
                  wx.showToast({
                    title: '保存成功',
                  });
                },
                fail() {
                  wx.hideLoading()
                }
              })
            }
          })
        })
      }
    })
    
  }
复制代码