微信小程序canvas画布转成图片并在转发里面形成图片转发

  onReady() {
    var that = this
    var rpx = wx.getSystemInfoSync().windowWidth / 375;       //加入rpx进行手机适配
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio         //刷新手机频率
        canvas.width = res[0].width * dpr  
        canvas.height = res[0].height * dpr  
        ctx.scale(dpr, dpr)
        setTimeout(() => {
        let pic = canvas.createImage();
        pic.src = '../../images/ic_kaopu.png';               //可以是本地，也可以是网络图片
        pic.onload = () => {
          ctx.drawImage(pic, 0, 0, 305 * rpx , 305 * rpx);
        }
        ctx.globalCompositeOperation = "destination-over";
        ctx.font = "bold 14px PingFang"
        let canvasTitleArray = this.data.jobDetail.recruitmentName.split(""); //文本...
        let firstTitle = ""; //第一行字
        let secondTitle = ""; //第二行字
        for (let i = 0; i < canvasTitleArray.length; i++) {
            let element = canvasTitleArray[i];
            let firstWidth = ctx.measureText(firstTitle).width;
            //console.log(ctx.measureText(firstTitle).width);
            if (firstWidth > 150) {
                let secondWidth = ctx.measureText(secondTitle).width;
                //第二行字数超过，变为...
                if (secondWidth > 0) {
                    secondTitle += "";
                    break;
                } else {
                    secondTitle += "...";
                }
            } else {
                firstTitle += element;
            }
        }
        //第一行文字
        ctx.fillText(firstTitle, 45* rpx , 130* rpx , 280* rpx, 100* rpx )//绘制文本
        //第二行文字
        if (secondTitle) {
            ctx.fillText(secondTitle, 205* rpx, 131* rpx , 280* rpx , 100* rpx)//绘制文本
        }
        // ctx.fillText(this.data.jobDetail.recruitmentName, 45 * rpx, 130 * rpx, 280 * rpx, 100 * rpx)  //左 上 右 下
        // ctx.fillStyle = "#2A323E"
        // ctx.strokeStyle='#ffffff'
        // ctx.fillRect(30, 75, 200, 40)
        ctx.lineWidth = 1
        // ctx.setLineJoin='round'
        ctx.strokeStyle="#CB8F36"
        ctx.strokeRect(45* rpx, 140* rpx , 120 * rpx, 20* rpx)
        ctx.font = '12px PingFang';
        let canvasTitleArrays = this.data.jobDetail.jobName.split("");
        let firstTitles = ""; //第一行字
        let secondTitles = ""; //第二行字
        for (let k = 0; k < canvasTitleArrays.length; k++) {
            let elements = canvasTitleArrays[k];
            let firstWidths = ctx.measureText(firstTitles).width;
            if (firstWidths > 70) {
                let secondWidths = ctx.measureText(secondTitles).width;
                //第二行字数超过，变为...
                if (secondWidths > 1) {
                    secondTitles += "..";
                    break;
                } else {
                    secondTitles += "...";
                }
            } else {
                firstTitles += elements;
            }
        }
        //第一行文字
        ctx.fillText(firstTitles, 50* rpx , 155* rpx , 250* rpx, 150* rpx )//绘制文本
        //第二行文字
        if (secondTitles) {
            ctx.fillText(secondTitles,141* rpx , 157* rpx, 250* rpx , 150* rpx)//绘制文本
        }
        // ctx.fillText(this.data.jobDetail.jobName, 50 * rpx, 155 * rpx, 250 * rpx, 150 * rpx)
        ctx.fillStyle = "#E8595C"
        ctx.font = 'bold 20px PingFang';
        ctx.fillText(this.data.jobDetail.dayPrice + '/天', 190* rpx , 160 * rpx, 80* rpx , 100 * rpx)
        ctx.fillStyle = "#4B4B4B"
        ctx.font = '12px PingFang';
        ctx.fillText(this.formatTimeTwo(this.data.jobDetail.startTime / 1000, 'Y/M/D') + '-', 45* rpx, 190* rpx, 100* rpx, 180* rpx )
        ctx.fillText(this.formatTimeTwo(this.data.jobDetail.endTime / 1000, 'Y/M/D'), 116* rpx, 190* rpx , 100* rpx , 180* rpx)
        ctx.fillText('需' + this.data.jobDetail.demandNumber + '人', 185* rpx, 190* rpx , 50 * rpx, 100* rpx )
        if(this.data.jobDetail.agent == 1){
          let datas = this.data.jobDetail.extend.splice(0, 3);
          var Y = 0;
          for (var index in datas) {
            // console.log(datas[index].dictName)
            if(datas[index].dictName == '饮食' || datas[index].dictName == '住宿' || datas[index].dictName == '结算方式'){
              ctx.fillStyle = "#E8595C"
              ctx.font = '15px PingFang';
              ctx.fillText(datas[index].value[0].dictName, 45* rpx  + Y, 215* rpx, 80* rpx , 100* rpx )
                Y += 70 * rpx
            }
          } 
        }else{
           if(this.data.jobDetail.dietMode == 1){
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('包吃', 45* rpx , 215* rpx, 80* rpx , 100* rpx )
           }else if(this.data.jobDetail.dietMode == 2){
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('现场可做饭', 45* rpx , 215* rpx, 80* rpx , 100* rpx )
           }else{
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('现场不能做饭', 45* rpx , 215* rpx, 80* rpx , 100* rpx )
           }
           if(this.data.jobDetail.residenceMode == 1){
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('包住', 120* rpx , 215* rpx, 80* rpx , 100* rpx )
           }else if(this.data.jobDetail.residenceMode == 2){
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('现场可住', 120* rpx , 215* rpx, 80* rpx , 100* rpx )
           }else{
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('现场不能住宿', 120* rpx , 215* rpx, 80* rpx , 100* rpx )
           }
           if(this.data.jobDetail.settlementMode == 1){
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('日结', 195* rpx , 215* rpx, 80* rpx , 100* rpx )
           }else if (this.data.jobDetail.settlementMode == 2){
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('月结', 195* rpx , 215* rpx, 80* rpx , 100* rpx )
           }else{
            ctx.fillStyle = "#E8595C"
            ctx.font = '10px PingFang';
            ctx.fillText('按进度结', 195* rpx , 215* rpx, 80* rpx , 100* rpx )
           }
        }
    }, 500);
        
                    
        //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
        wx.showToast({
          title: '加载中...',
          icon: 'loading',
          duration: 1000
        });

        //绘制图片
        setTimeout(function () {
          wx.canvasToTempFilePath({
            // canvasId: 'myCanvas',
            x: 0,
            y: 0,
            width: 500,
            height: 350,
            destWidth: 999,
            destHeight: 809,
            canvas: canvas,
            complete(res) {
              console.log(res.tempFilePath)
              that.setData({
                imagePath: res.tempFilePath
              })
            }
          })
        }, 1000)
      })
  },


//调用可以直接计算出时间戳的时间

formatTimeTwo(number, format) {
    var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
    var returnArr = [];
    var date = new Date(number * 1000);
    returnArr.push(date.getFullYear());
    returnArr.push((date.getMonth() + 1));
    returnArr.push((date.getDate()));
    returnArr.push((date.getHours()));
    returnArr.push((date.getMinutes()));
    returnArr.push((date.getSeconds()));

    for (var i in returnArr) {
      format = format.replace(formateArr[i], returnArr[i]);
    }
    return format;
  },




  //转发界面
  onShareAppMessage() {
     return {
        title: recruitmentName,
        imageUrl: this.data.imagePath
      }

   }