微信小程序 canvas海报

canvas描述的比较详细： https://blog.csdn.net/abs625/article/details/100170552

 

 

 

// 遮罩层滚动穿透
  myCatchTouch: function () {
    return;
  },
//画布
  share: function (e) {
    var that = this;
    var thumb = that.data.info.thumb;
    var erweima = that.data.info.erweima
    var base_thumb = that.data.info.base_thumb;
    var title = that.data.info.title;
    wx.getSystemInfo({
      success: (res) => {
        var rpx = res.windowWidth / 750
        var ctx = wx.createCanvasContext('share')   //绑定canvas
        ctx.setFillStyle('#fff')
        ctx.fillRect(0, 0, 580 * rpx, 776 * rpx)       //绘制矩形
        // 顶部图片
        wx.getImageInfo({    //获取图片信息
          src: thumb,     
          success: res => {
            ctx.drawImage(res.path, 0, 0, 580 * rpx, 580 * rpx)   //图片
            // 二维码图片
            wx.getImageInfo({   //获取图片信息
              src: erweima,
              success: res1 => {
                ctx.drawImage(res1.path, 424 * rpx, 600 * rpx, 130 * rpx, 130 * rpx)
                ctx.setFontSize(24 * rpx)  //字体大小
                ctx.setFillStyle('#333')   //字体颜色
                ctx.setTextAlign('left')    // 文字
                if (title > 20) {             //省略号
                  ctx.fillText(title, 20 * rpx, 622 * rpx)
                } else {
                  var stateText = title.substring(0, 20)
                  var endText = title.substring(20, 37)
                  ctx.fillText(stateText, 20 * rpx, 622 * rpx)
                  ctx.fillText(endText + '...', 20 * rpx, 655 * rpx)
                }
                wx.getImageInfo({    //获取图片信息
                  src: base_thumb,
                  success: res2 => {
                    ctx.drawImage(res2.path, 20 * rpx, 670 * rpx, 160 * rpx, 100 * rpx)
                    ctx.setFillStyle('#333')
                    ctx.setFontSize(20 * rpx)
                    ctx.fillText('长按二维码预定,分享更可赚佣金呦', 245 * rpx, 755 * rpx)
                    ctx.draw(true)   
                  }
                })
              }
            })
          }
        })
      },
    })
  },
  //保存网络图片到相册方法  
  saveToBlum: function () {
        wx.canvasToTempFilePath({
          canvasId: 'share',      //与canvasid保持一致
          success:function(res1){
            wx.saveImageToPhotosAlbum({
              filePath: res1.tempFilePath,
              success(result) {
                wx.showToast({
                  title: '保存成功',
                  icon: 'success'
                })
              }
            })
          }
        })

  },

<view class="cavansZhe" wx:if="{{canvasType}}" catchtouchmove="myCatchTouch">
    <canvas canvas-id="share" class="canvas" bindlongtap="saveImg" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
    <view class="fs32">长按图片保存或发送给好友</view>
    <image bindtap="canvasClose" src="/hyb_travel/order/images/close_white.png" mode="widthFix" style="width:76rpx;height:76rpx;margin-top:36rpx"></image>
</view>
<!-- bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" 防止海报滑动-->