微信小程序之生成海报保存本地

知识都在代码里
index.wxml

<view class="canvas-box">
  <button bindtap="generate">生成海报</button>

  <canvas canvas-id="myCanvas" wx:if="{{shows}}" style='width:{{canvasW}}px; height:{{canvasH}}px' />

    <button bindtap="saveImg">保存图片</button>
</view>
.canvas-box{
  width: 100%;
  height: 1000rpx;
  margin-top: 30rpx;
}
.canvas-box canvas{
  /* width: 90%;
  height: 100%; */
  margin: auto;
  border:1px solid #d3d3d3;
}

index.js

Page({
  data: {
    canvasPic: "",
    canvasW: "",
    canvasH: "",
    //用户个人信息
    userInfo: {
      avatarUrl: "", //用户头像
      nickName: "", //用户昵称
    },
    shows: true,
  },
  onLoad() {
    var that = this;
    /** 获取用户信息 */
    wx.getUserInfo({
      success: function (res) {
        that.setData({
          userInfo: {
            avatarUrl: res.userInfo.avatarUrl,
            nickName: res.userInfo.nickName,
          },
        })
        that.getcanvas()
      }
    })
  },

  //绘制canvas的方法
  getcanvas() {
    let that = this
    let rpx = 1;
    //适配手机
    wx.getSystemInfo({
      success(res) {
        rpx = res.windowWidth / 375;
        that.setData({
          canvasW: res.windowWidth - 20,
          canvasH: res.windowHeight - 100,
        })
      }
    })
    var w = that.data.canvasW;
    var h = that.data.canvasH;
    var avatarUrl = that.data.userInfo.avatarUrl; //头像
    var nickName = that.data.userInfo.nickName; //昵称
    // var bgImgPath = that.data.bgImgPath;//封面大图
    // var xcxcode = that.data.xcxcode;//二维码
    /* 头像存储至本地*/
    wx.getImageInfo({
      src: avatarUrl,
      success: result => {
        console.log(result)
        
        let ctx = wx.createCanvasContext('myCanvas')
        console.log(ctx)
        ctx.drawImage('../assets/bg.png', 0, 0, w, h) // 背景

        //字体
        ctx.setFontSize(16);
        ctx.setFillStyle('#eee');
        ctx.fillText('-xiaomimi-', (w - 150) * rpx, 30 * rpx);
        ctx.setFontSize(14);
        ctx.setFillStyle('#000');
        ctx.fillText('59', (w) * rpx, 80 * rpx);
        // 头像
        ctx.save(); // 保存当前ctx的状态
        ctx.arc((w - 95) * rpx, 90 * rpx, 43, 0, Math.PI * 2, false); //画出圆 x,y,r，0, Math.PI * 2, false
        ctx.clip(); //裁剪上面的圆形result.path
        ctx.drawImage(result.path, (w - 140) * rpx, 45 * rpx, 90 * rpx, 90 * rpx) // 在刚刚裁剪的园上画图 x,y,w,h
        ctx.restore(); // 还原状态

        //字体
        ctx.setFontSize(14);
        ctx.setFillStyle('#000');
        ctx.fillText(nickName +' |  2021.01.29', (w - 200) * rpx, 150 * rpx);

         ctx.draw(
                true, ()=>{  
                  wx.canvasToTempFilePath({  
                    canvasId: 'myCanvas',  
                    x: 0,  
                    y: 0,  
                    width: 320,  
                    height: 540,  
                    destWidth: 320,  
                    destHeight: 240,  
                    success: res => {  
                      this.canvasPic = res.tempFilePath;  
                      console.log('ee', res)  
                    },  
                    complete: (rs) => {  
                      // console.log('canvasToTempFilePath', rs)  
                    }  
                  })
                })
      }
    })
  },

  //点击保存到相册
  saveImg: function () {
    console.log('kk', this.canvasPic)
    wx.saveImageToPhotosAlbum({
      filePath: this.canvasPic,
      success(res) {
        console.log('res', res);
        wx.showToast({
            title: '已保存到相册',
            icon: 'success',
             duration: 3000
        })
      }
    })
  },

  generate: function () {
    var that = this
    var sh = that.data.shows;
    that.setData({
      shows: true
    })
  },

  darwCanvas() {
    var that = this
    const app = getApp()
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(avatarUrl, 0, 0, w - 39, 685)
    ctx.save(); // 先保存状态 已便于画完圆再用
    ctx.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
    //  ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
    ctx.drawImage('../assets/0.jpg', avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片 
    ctx.draw()
  }
})