小程序生成用canvas生成海报

<view class="saveImg" bindtap="saveImg">保存到相册</view>
<view class="canvasImg" wx:if="{{canvasImgState&&!tempFilePathState}}">
    <canvas canvas-id="myCanvas"  style='width:{{canvasW}}px; height:{{canvasH}}px;' />
  </view>
  <image class="canvasImg" src="{{tempFilePathUrl}}" wx:if="{{tempFilePathState}}"></image>

**

因为canvas 渲染过后
页面没有退出再次会不生效，所有要将生成好的图片保存一下，判断当前已有好报图片后就不会重新绘画，直接用images标签展示出来就行

**

图片必须要下载后获取地址 网络图片地址的域名必须要在小程序后台添加一下域名 否则下载会失败

 //绘制canvas的方法
 data:{
	 canvasW:'',
    canvasH:'',
    canvasImgState:false,// canvas 展示的状态
    tempFilePathUrl:'',//生成的图片
    tempFilePathState:false,// 这是图片images 的标签展示状态
	},
  getcanvas() {
    wx.showToast({
      title: '正在生成图片',
      icon: 'loading'
  })
    let that = this
    let rpx = 1;
    //适配手机
    wx.getSystemInfo({
      success(res) {
        console.log(res)
        rpx = res.windowWidth / 375;
        that.setData({
          canvasW: res.windowWidth ,
          canvasH: res.windowHeight,
        })
      }
    })
    
    var w = that.data.canvasW;
    var h = that.data.canvasH;
    let ctx = wx.createCanvasContext('myCanvas')
    let logoposter=''
    let wxlogo=''
    wx.getImageInfo ({
      src:'https://bj.bcebos.com/v1/aibanktest/static/logoposter.png',
      success: function(res){
        console.log(res)
        logoposter=res.path
      },fail:(err)=>{
        wx.showToast({
          title: '下载图片失败！',
          icon:'error',
          duration:3000
        })
        that.setData({
          canvasImgState:false,
        })
      }
    })
    
    wx.getImageInfo ({
      src:'https://bj.bcebos.com/v1/aibanktest/static/wxlogo.jpg',
      success: function(res){
        console.log(res)
        wxlogo=res.path
      },fail:(err)=>{
        wx.showToast({
          title: '下载图片失败！',
          icon:'error',
          duration:3000
        })
        that.setData({
          canvasImgState:false,
        })
      }
    })
    ctx.beginPath();
    // ctx.fillStyle="#030726";
    ctx.arc(0,0,w*rpx, h);
    //网络图片必须要先下载 及后台给的网络地址图片  而且域名必须要在小程序后台域名添加
    wx.getImageInfo ({
      src:'https://bj.bcebos.com/v1/aibanktest/static/canvasB.png',
      success: function(res){
        console.log(res)
        ctx.fillStyle='#030726'
        ctx.fillRect(0,0,750*rpx,h)
        if(h>736){
          ctx.drawImage(res.path, 0, 0, w, 680*rpx) // 背景
        }else{
          ctx.drawImage(res.path, 0, 0, w, 620*rpx) // 背景
        }
        ctx.restore();
        ctx.font='19px sans-serif'
        ctx.setTextAlign('left')
        ctx.fillStyle='#fff'
        // console.log(that.data.title)
        ctx.fillText(that.data.title,50,90*rpx)
        ctx.font='11px sans-serif'
        ctx.setTextAlign('left')
        ctx.fillStyl='#fff'
        // console.log(that.data.brandName)

        ctx.fillText('创作者：'+that.data.brandName,50,120*rpx)
        var str = that.data.picUrl.replace('http:','https:')
        wx.getImageInfo ({
          src:str,
          success: function(res){
            console.log(res)
            // canPicUrl=res.path
            ctx.drawImage(res.path, 50*rpx, 130*rpx, 275*rpx, 265*rpx) // 主图
            ctx.restore();
            ctx.font='11px sans-serif'
            ctx.setTextAlign('left')
            ctx.fillStyle='#CCCCCC'
            ctx.fillText('收藏者',50,420*rpx)
            ctx.font='12px sans-serif'
            ctx.setTextAlign('left')
            ctx.fillStyle='#CCCCCC'
        // console.log(that.data.userName)

            ctx.fillText(that.data.userName,50,440*rpx)
            ctx.font='11px sans-serif'
            ctx.setTextAlign('left')
            ctx.fillStyle='#CCCCCC'
            ctx.fillText('资产 I D',50,470*rpx)
            ctx.font='12px sans-serif'
            ctx.setTextAlign('left')
            ctx.fillStyle='#CCCCCC'
        // console.log(that.data.assetId)

            ctx.fillText(that.data.assetId,50,490*rpx)
            ctx.font='11px sans-serif'
            ctx.setTextAlign('left')
            ctx.fillStyle='#CCCCCC'
            ctx.fillText('交易哈希',50,520*rpx)
            that.drawText(ctx, that.data.txId,50,540*rpx,2,218*rpx)
            if(h>736){
              ctx.drawImage(logoposter, 40, 710*rpx, 160*rpx, 45*rpx) // 左下角图
              ctx.drawImage(wxlogo, 280*rpx, 700*rpx, 70*rpx, 70*rpx) // 右下角图 小程序logo
            }else{
              ctx.drawImage(logoposter, 40, 610*rpx, 150*rpx, 35*rpx) // 左下角图
              ctx.drawImage(wxlogo, 280*rpx, 600*rpx, 58*rpx, 58*rpx) // 右下角图 小程序logo
            }
            
            ctx.restore();
            ctx.draw( true, ()=>{  
            
              //保持图片
              wx.canvasToTempFilePath({  
                canvasId: 'myCanvas',  
                x: 0,  
                y: 0,  
                width: 750,  
                height: h*2,  
                destWidth: 750,  
                destHeight: h*2,  
                quality:0.6,
                success: res => {  
                  wx.hideToast()
                  let url=res.tempFilePath
                  // this.canvasPic = res.tempFilePath;  
                  console.log('ee', res)  
                  wx.saveImageToPhotosAlbum({
                    filePath:url,
                    success(res) {
                      console.log('res', res);
                      console.log('url', url);
                      wx.showToast({
                          title: '已保存到相册',
                          icon: 'success',
                          duration: 3000
                      })
                      that.setData({
                        canvasImgState:false,
                        tempFilePathUrl:url
                      })
                    },
                    fail: (rs) => {  
                      that.setData({
                        canvasImgState:false,
                        tempFilePathUrl:url
                      })
                      // console.log('canvasToTempFilePath', rs)  
                    }  
                  })
                },  
                fail: (rs) => {  
                  that.setData({
                    canvasImgState:false
                    
                  })
                  // console.log('canvasToTempFilePath', rs)  
                }  
              })
            }); // 还原状态
          },fail:(err)=>{
            wx.showToast({
              title: '下载图片失败！',
              icon:'error',
              duration:3000
            })
            that.setData({
              canvasImgState:false,
            })
          }
        })
           
    }
    })
        
  },
  //文字太长字段换行
  drawText: function (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
    var lineWidth = 0;
    var lastSubStrIndex = 0; //每次开始截取的字符串的索引
    for (let i = 0; i < str.length; i++) {
      lineWidth += ctx.measureText(str[i]).width;
      if (lineWidth > canvasWidth) {
        ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
        initHeight += 20; //16为字体的高度
        lineWidth = 0;
        lastSubStrIndex = i;
        titleHeight += 16;
      }
      if (i == str.length - 1) { //绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
      }
    }
    // 标题border-bottom 线距顶部距离
    titleHeight = titleHeight + 10;
    return titleHeight
  },
  //保存图片
  saveImg(){
    this.setData({
      canvasImgState:true
    })
    console.log(this.data.tempFilePathUrl)
    let that  = this
    if(this.data.tempFilePathUrl!=''){
      this.setData({
        tempFilePathState:true
      })
      console.log(that.data.tempFilePathUrl)
     
      wx.saveImageToPhotosAlbum({
        filePath:that.data.tempFilePathUrl,
        success(res) {
          console.log(res)
          wx.showToast({
              title: '已保存到相册',
              icon: 'success',
              duration: 3000
          })
          that.setData({
            canvasImgState:false,
            tempFilePathState:false
          })
        },
        fail: (rs) => {  
          wx.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            showCancel: false,
            success: modalSuccess => {
              wx.openSetting({
                success(settingdata) {
                  console.log("settingdata", settingdata)
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    wx.showModal({
                      title: '提示',
                      content: '获取权限成功,再次点击图片即可保存',
                      showCancel: false,
                    })
                  } else {
                    wx.showModal({
                      title: '提示',
                      content: '获取权限失败，将无法保存到相册哦~',
                      showCancel: false,
                    })
                  }
                },
                fail(failData) {
                  console.log("failData", failData)
                }
              })
            }
          })
          console.log(rs)
          that.setData({
            canvasImgState:false,
            tempFilePathState:false
          })
          // console.log('canvasToTempFilePath', rs)  
        }  
      })
    }else{
      this.getcanvas()
    }
  },