微信小程序生成分享图片

//二进制装换base64生成二维码

    getQrcode(){

      // wx.showLoading({

      //   title: '加载中',

      // });

      var that = this;

      wx.request({

        url: host +url,

        data:{

          id:that.data.shareId !== '' ? that.data.shareId :'noId' ,

        },

        method: 'get',

        header: {

            'Content-Type': 'application/json',

            'Authorization': wx.getStorageSync('token')

        },

        success: function (res) {

          // wx.hideLoading()

          console.log('res',res);

          const imageUrl = res.data.data;

          that.send_code(imageUrl)

        },

        fail: function (err) {

          console.log(err)

        }

    })

    },

send_code(code) {

    /*code是指图片base64格式数据*/

    //声明文件系统

    const fs = wx.getFileSystemManager();

    //随机定义路径名称

    var times = new Date().getTime();

    var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';

    //将base64图片写入

    fs.writeFile({

      filePath: codeimg,

      data: code.slice(22),

      encoding: 'base64',

      success: () => {

        //写入成功了的话，新的图片路径就能用了

          this.createNewImg(codeimg);

      }

    });

  },

  createNewImg: function (picUrl) {

    console.log('图片连接',picUrl);

    var that = this;

    var context = wx.createCanvasContext('mycanvas',that)

    context.setFillStyle("#f3f2f2")

    context.fillRect(0, 0, 375, 600)

    var path = "../../static/images/sharePic.jpg";

    context.drawImage(path, 0, 0, 330, 160);

    var path1 ="../../static/images/divider.png"

    var path2 ="../../static/images/logo_icon.png"

    var path3 ="../../static/images/logo_shouquan.png"

    var path4 ="../../static/images/divide.png"

   

    // 绘制填充矩形

    const xOffset = 15; // 设置左边距离

    const yOffset = 120; // 设置距离顶部的距离

    const widthshare = 290; //宽度

    const heightshare = 390 //高度

    const radius = 2 //弧度

    // 绘制填充矩形

    context.beginPath();

    context.moveTo(radius + xOffset, yOffset); // 移动到起始点

    context.lineTo(175 + xOffset, yOffset); // 绘制上边线

    context.arcTo(widthshare + xOffset, yOffset, widthshare + xOffset, radius + yOffset, radius); // 绘制右上角圆角

    context.lineTo(widthshare + xOffset, 275); // 绘制右边线

    context.arcTo(widthshare + xOffset, heightshare, 175 + xOffset, heightshare, radius); // 绘制右下角圆角

    context.lineTo(radius + xOffset, heightshare); // 绘制下边线

    context.arcTo(0 + xOffset, heightshare, 0 + xOffset, 275, radius); // 绘制左下角圆角

    context.lineTo(0 + xOffset, radius + yOffset); // 绘制左边线

    context.arcTo(0 + xOffset, yOffset, radius + xOffset, yOffset, radius); // 绘制左上角圆角

    context.closePath(); // 封闭路径

    context.setFillStyle('#FFF'); // 设置填充颜色

    context.setStrokeStyle('#FFF');

    context.fill(); // 填充颜色

    context.stroke();

   

   

    //底部信息

    const xfooterOffset = 15; // 设置左边距离

    const yfooterOffset = 400; // 设置距离顶部的距离

    const widthfootershare = 290; //宽度

    const heightfootershare = 60 //高度

    const footerradius = 2 //弧度

    // 绘制填充矩形

    context.beginPath();

    context.moveTo(xfooterOffset + footerradius, yfooterOffset); // 移动到起始点

    context.lineTo(xfooterOffset + widthfootershare - footerradius, yfooterOffset); // 绘制上边线

    context.arcTo(xfooterOffset + widthfootershare, yfooterOffset, xfooterOffset + widthfootershare, yfooterOffset + footerradius, footerradius); // 绘制右上角圆角

    context.lineTo(xfooterOffset + widthfootershare, yfooterOffset + heightfootershare - footerradius); // 绘制右边线

    context.arcTo(xfooterOffset + widthfootershare, yfooterOffset + heightfootershare, xfooterOffset + widthfootershare - footerradius, yfooterOffset + heightfootershare, footerradius); // 绘制右下角圆角

    context.lineTo(xfooterOffset + footerradius, yfooterOffset + heightfootershare); // 绘制下边线

    context.arcTo(xfooterOffset, yfooterOffset + heightfootershare, xfooterOffset, yfooterOffset + heightfootershare - footerradius, footerradius); // 绘制左下角圆角

    context.lineTo(xfooterOffset, yfooterOffset + footerradius); // 绘制左边线

    context.arcTo(xfooterOffset, yfooterOffset, xfooterOffset + footerradius, yfooterOffset, footerradius); // 绘制左上角圆角

    context.closePath(); // 封闭路径

    context.setFillStyle('#FFF'); // 设置填充颜色

    context.fill(); // 填充颜色

    context.setStrokeStyle('#FFF'); // 设置边框颜色

    context.stroke();

   

    //绘制标题

    context.setFontSize(18);

    context.setFillStyle('#000000');

    context.setTextAlign('left');

    context.font= 'bold 16px Arial';

    context.fillText(that.data.title, 25, 150);

    context.stroke();

    //绘制时间

    context.setFontSize(12);

    context.setFillStyle('#BDBDBD');

    context.setTextAlign('left');

    context.fillText(that.data.time, 25, 172);

    console.log('时间',that.data.hms);

    context.fillText(that.data.hms, 100, 172);

    context.stroke();

   

    //分割线

    context.drawImage(path1, 25, 185,260,3);

    context.stroke();

   //绘制内容

    context.setFontSize(13);

    context.setFillStyle('#383838');

    context.setTextAlign('left');

    context.font= 'bold 14px yahei';

   

    console.log('绘制内容',that.data.text)

    const text = '    ' + that.data.text;

    const maxWidth = 270; // 文字区域的最大宽度

    const lineHeight = 22; // 每行文字的高度

    const x = 25; // 起始横坐标

    let y = 212; // 起始纵坐标

    const indentChars = 2; // 首行缩进的汉字数量

    const words = text.split('');

    let line = '';

   

    for (let i = 0; i < words.length; i++) {

      const word = words[i];

      const lineTest = line + word;

      const lineTestWidth = context.measureText(lineTest).width;

      if (lineTestWidth <= maxWidth) {

        line = lineTest;

      } else {

        if (i === indentChars) {

          context.fillText('  '.repeat(indentChars) + line, x, y); // 首行缩进

        } else {

          context.fillText(line, x, y);

        }

       

        y += lineHeight;

        line = word;

      }

    }

    if (line.length > 0) {

      if (words.length <= indentChars) {

        context.fillText(' '.repeat(indentChars) + line, x, y); // 首行缩进

      } else {

        context.fillText(line, x, y);

      }

    }

    context.stroke();

    //绘制左下角文字

    context.setFontSize(8);

    context.setFillStyle('#BDBDBD');

    context.setTextAlign('right');

    context.fillText("中国***商品数智化****", 190, 330);

    context.stroke();

    context.setFontSize(8);

    context.setFillStyle('#BDBDBD');

    context.setTextAlign('right');

    context.fillText("www.315i.com", 190, 345);

    context.stroke();

    context.setFontSize(8);

    context.setFillStyle('#BDBDBD');

    context.setTextAlign('right');

    context.fillText("长按二维码进入", 190, 360);

    context.stroke();

   

    //绘制右下角小程序二维码

    if(app.globalData.picShare){

      //二维码

      context.drawImage(picUrl, 200, 305,70,70);

      context.stroke();

      context.drawImage(path3, 30, 410, 40, 40);

      context.font= 'normal bold 16px Arial,sans-serif';

      context.setFillStyle('#363636');

      context.setTextAlign('left');

      context.fillText(that.data.shareName, 90, 426);

      context.fillText(that.data.shareIphone, 140, 426);

      context.stroke();

      context.setFontSize(12);

      context.font= 'normal 12px Arial,sans-serif';

      context.setFillStyle('#363636');

      context.setTextAlign('left');

      const compName = '***网络科技有限公司';

      const letterSpacing = 2; // 设置文字间隔

      let x = 90;

      const y = 445;

      for (let i = 0; i < compName.length; i++) {

        context.fillText(compName[i], x, y);

        x += context.measureText(compName[i]).width + letterSpacing; // 增加间隔

      }

      context.stroke();

    }else{

      //默认的二维码

      context.drawImage(picUrl, 200, 305,70,70);

      context.stroke();

      context.drawImage(path2, 50, 414, 90, 28);

      context.setFontSize(14);

      context.setFillStyle('#363636');

      context.setTextAlign('left');

      context.fillText('4000-315-100', 165, 427);

      context.font= 'bold 14px Arial';

      context.stroke();

     

      //中间分割线条

      context.drawImage(path4, 150, 414, 1, 30);

      context.stroke();

      context.setFontSize(10);

      context.setFillStyle('#363636');

      context.setTextAlign('left');

      context.fillText("***网络科技有限公司", 165, 442);

      context.stroke();

    }

    context.draw();

    //将生成好的图片保存到本地

    setTimeout(function () {

      wx.canvasToTempFilePath({

        canvasId: 'mycanvas',

        success: function (res) {

          var tempFilePath = res.tempFilePath;

          console.log('成功',res.tempFilePath);

          // app.globalData.picShare = false;

          that.triggerEvent('canvasPic',{url:res.tempFilePath});

          that.setData({

            imagePath: tempFilePath,

            canvasHidden: true,

            show:true

          });

        },

        fail: function (res) {

          console.log(res);

        }

      },that);

    }, 500);

  },