小程序canvas生成海报

用的是canvas绘图，

wxml

showCanvas显隐用的，cencalShowCanvas点击灰色地带会隐藏画布，catchtouchmove是让弹窗层弹出时不会被滑动从而正确触发cencalShowCanvas方法

  <view catchtouchmove="{{showCanvas==false?'':true}}">
    <view wx:if="{{showCanvas}}">
      <view class="gray-view" bindtap="cencalShowCanvas"></view>
      <view class="canvas-v">
        <view style="width:80%;">
          <canvas canvas-id='canone' style='position: fixed;top:250rpx;width:{{canvasWidth}}px; height:{{canvasWidth+65}}px;background-color:#fff;' disable-scroll='true'>
          </canvas>
          <view class="can-btn">
            <button bindtap="save" style="position: fixed;top:{{canvasWidth+205}}px;">保存图片</button>
          </view>
        </view>
      </view>
    </view>
  </view>

wxss

.gray-view{
  position: fixed;
  top: 0;
  background-color: #000;
  filter:alpha(Opacity=80);
  -moz-opacity:0.5;opacity: 0.5;
  height: 1600rpx;
  width: 100%;
}
.canvas-v{
  display: flex;
  justify-content: center;
}
.can-btn{
  display: flex;
  justify-content: center;
}
.can-btn button{
  border-radius: 40rpx;
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #07ba07;
  color: #fff;
}

js(由于画布无法直接使用网络图片，所以需要wx.getImageInfo把它下载回来才能使用)

data:{
    showCanvas:false,
    canvasWidth:0,
    canvasHeight:0,
}

onLoad(){
let that = this
wx.getSystemInfo({
      success: function (res) {
        myCanvasWidth = res.windowWidth *80/100
        myCanvasHeight = res.windowHeight - 200
      },
    })
    that.setData({
      canvasWidth: myCanvasWidth,
      canvasHeight: myCanvasHeight
    })

},
  cencalShowCanvas(){
    this.setData({
      showCanvas: false
    })
  },


  poster(){
    let that = this, img = that.data.goodsList[0].img,qrcode
    // img = img.slice(0,4)+'s'+img.slice(4)
    that.cancel()
    that.setData({
      showCanvas:true
    })
    //网络图片地址无法用画布截取到，故使用微信获取图片信息的接口下载回来，达到设置网络图片地址

    wx.getImageInfo({
      src: that.data.qrcode,
      success(res){
        qrcode=res.path
      }
    })
    wx.getImageInfo({
      src: img,
      success(res){
        var ctx = wx.createCanvasContext('canone', that);
        ctx.setFillStyle('#fff')//这两行给画布加上白色背景，否则保存下来的图片是透明底色
        ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasWidth + 65)
        ctx.drawImage('../../assets/images/head.png', 0,0,that.data.canvasWidth+1,60)
        ctx.drawImage(res.path, 10, 65, that.data.canvasWidth - 20, that.data.canvasWidth - 120)
        // 二维码
        ctx.drawImage('../../assets/images/canvas-foo.png', 0, that.data.canvasWidth - 70, that.data.canvasWidth + 1, 140)
        ctx.drawImage(qrcode, that.data.canvasWidth / 2.55, that.data.canvasWidth / 1.24, that.data.canvasWidth / 4.5, that.data.canvasWidth / 4.5)

        ctx.setTextAlign('center')
        ctx.setFillStyle('#fff')
        ctx.setFontSize(10)
        // ctx.fillText(that.data.store.storeName, that.data.canvasWidth/2,that.data.canvasWidth+45)
        // ctx.fillText(that.data.store.addressDetail, that.data.canvasWidth / 2, that.data.canvasWidth + 60)

        ctx.draw(false, () => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            canvasId: 'canone',  // shareCanvas 为制定 绘图canvas 的ID
            success: (res) => {
            },
            complete: (res) => {
              wx.hideLoading()
            }
          })
        });
      }
    })
  },
  //保存画布
  save() {
    let that = this
    wx.canvasToTempFilePath({
      canvasId: 'canone',
      quality: 'jpg',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function success(res) {
            wx.showToast({
              title: '保存成功',
            })
            that.cencalShowCanvas()
          },
          complete: function fail(e) {
          }
        });
      },
      complete: function complete(e) {
      }
    })

单单是做完上面的的话会出现一个bug，就是因为canvas是官方组件无法使用position: fixed;就会导致弹出的时候画布会随着屏幕的滑动而滑动。

只要给父元素加一个

<view catchtouchmove="{{show==false?'':true}}"></view>

就ok了。

css

.gray-view{
  position: fixed;
  top: 0;
  background-color: #000;
  filter:alpha(Opacity=80);
  -moz-opacity:0.5;opacity: 0.5;
  height: 1600rpx;
  width: 100%;
}
.share-view{
  position: fixed;
  bottom: 60px;
  background-color:#fff;
  height: 300rpx;
  width: 100%;
}
.share-type{
  display: flex;
  justify-content: space-around;
}
.share-type image{
  width: 100rpx;
  height: 100rpx;
}
.share-type button{
  width: 150rpx;
  height: 150rpx;
  line-height: 45rpx;
  background: transparent;
  font-size: 30rpx;
}
.share-type button::after{
  border: none;
}
.cancel{
  text-align: center;
  font-size: 34rpx;
  line-height: 65rpx;
}
.goods{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  margin-top: 10rpx;
}