微信小程序canvas 生成海报保存到相册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

getFilepath: function(picuurl,picprice,picttitle,mminaurl){
  let that=this;
  var filePath,minaPath;
  wx.downloadFile({
    // 获取图片临时地址
    url:picuurl,
    success: function(res){
      if (res.statusCode == 200){
        filePath=res.tempFilePath;

        // 获取小程序码临时地址
        wx.downloadFile({
          url:mminaurl,
          success: function(res){
            if (res.statusCode == 200){
              minaPath=res.tempFilePath;
              that.getCanvas(filePath,picprice,picttitle,minaPath);
            }
          }
        })


      }
    }
  })
}

1
2
3
4
5

<canvas style="width: {{widd}}px; height: {{heii}}px;" canvas-id="canvpos"/>
<!-- 海报下的'保存图片' -->
<view catchtap='saveCanvas' style='margin-top: 20rpx;'>
  <canvas style="width: {{widd}}px; height: {{pinh}}px;" canvas-id="savetoDude"/>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

getCanvas: function(filePath,picprice,picttitle,minaPath){
  var img=filePath;
  let that=this;
  // 获取屏幕宽高
  var wth;// 屏幕宽
  wx.getSystemInfo({
    success:function(res){
      wth=res.windowWidth;
    }
  })
  // 下面有部分省略
  var canvasW=wth*0.84;// 画布宽
  var context = wx.createCanvasContext('canvpos');// 创建并返回绘图上下文
  context.drawImage(img,0,0,canvasW,canvasW)// Ⅰ、商品图
  context.setFontSize(25)
  context.setFillStyle('white')
  var detailW=0.36*wth;// 商品描述位置X
  var detailH=redH/2-15+canvasW+10;// 第一行商品描述位置Y
    context.fillText(picttitle,detailW,detailH)
  that.setData({
    widd:canvasW,
    heii:wholeH// 第一个画布高
  })
  context.stroke()
  context.draw(false)
  that.sharetoDude(canvasW,wth);// 绘制画布二，传参画布宽、屏幕宽
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

sharetoDude: function(canvasW,wth){
  let that=this;
  // 获取画布一宽度(因代码顺序执行，这时widd 将已存在)
  var pinkH=0.128*wth;// 粉条高度为0.128*屏幕宽
  that.setData({
    pinh:pinkH
  })
  // 画笔2
  var ctx = wx.createCanvasContext('savetoDude');// 创建并返回绘图上下文
  let x=0;
  let y=0;
  let r = parseInt(wth* 0.064);
  let w=canvasW;
  let h=pinkH;
  // 绘制圆角矩形
  if(wx.canIUse('canvasContext.arcTo')){
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath();
    const grd = ctx.createLinearGradient(0, 0, canvasW, 0)
    grd.addColorStop(0, '#e3675e');
    grd.addColorStop(0.55,'#dd3a2d');
    grd.addColorStop(1, '#db3f21');
    ctx.setFillStyle(grd)
    ctx.fill();
    ctx.setFontSize(16)
    ctx.setFillStyle('#FFFFFF')
    ctx.setTextAlign('center')
    ctx.fillText("保存到相册ccc",canvasW/2,pinkH/2+6)// 粉条中间的分享
  }else{
    // 对应企业微信绘制图像
    var savepic='../../res/images/save_pic.png';
    ctx.drawImage(savepic,0,0,canvasW,pinkH)
  }
  ctx.draw()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

saveCanvas: function(){
  let that = this;
    wx.showLoading({
      title: '生成图片中...'
    })
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    canvasId: 'canvpos',
    success: function (res) {
      that.setData({
        canvasTemppath: res.tempFilePath,
      })
      wx.hideLoading()
      wx.saveImageToPhotosAlbum({
        filePath: that.data.canvasTemppath,
        success(res) {
          wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 1500
          }),
          that.closePoster();
        }
      })
    },
    fail: function (res) {
      console.log(res)
    }
  })
}