小程序canvas实现（分享朋友圈生成图片）

业务场景：生成一个浮层图片

实现思路：

设置一个盒子，将canvas生成的图片和保存图片的按钮放里边，当有canvas生成图片的时候这个盒子显示，否则隐藏。

这里需要注意的是，canvas画图片的时候，如果是线上路径就先要使用wx.getImageInfo获取图片的临时路径，使用这个路径就可以在真机上显示了

前台代码：

<canvas canvas-id="myCanvas" class='canvas'/>

<!-- 预览分享图 这里就是上图展示的效果   -->
<!-- 刚开始是隐藏的 生成分享图之后显示, 用一个布尔变量来控制 这里的样式大家看图就写出来了 -->
<view hidden='{{hidden}}' class='preview' bindtap='cancel'>
  <image src='{{prurl}}' mode='widthFix'></image>
  <view>
  <button type='primary' size='mini' bindtap='save'>保存分享</button>
  </view>
</view>

css代码：先让canvas不在用户的视线内

给弹出层设置固定定位，和透明色，弹性盒子

.canvas{
  width: 100%;
  height: 100%;
   position: fixed;
  left: 0;
  top: 999999rpx;     
  background-color: rgba(0,0,0,0.3)
}

.preview{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:rgba(0,0,0,0.8);
  z-index: 2;
  text-align: center;
  display:flex; 
  flex-flow:column;
}

.preview image{
  width: 80%;
  height: 80%;
  margin: 10%;
  margin-bottom: 5%;
}

.preview button{
  margin:0 20rpx;
  border-radius:50px;
  background-color:#ee2a65;
  width:40%;
}

js代码：主要就是将canvas生成的图片保存为本地的路径

    onShow: function () {
      var userId = wx.getStorageSync('user_id');
      var that = this;
      if (userId) {
        var qrcode = wx.getStorageSync('qrcode');
        if (!qrcode) {
          that.getQuear();
        }
      }

    },   
 getQuear:function(){
      var user_id = wx.getStorageSync('user_id');
      wxb.Post('/api/automatic.manage/getQrcode', {
        user_id: user_id
      }, function (data) {
        //获取网络图片本地路径
        wx.getImageInfo({
          src: data.path,//服务器返回的图片地址
          success: function (res) {
            //res.path是网络图片的本地地址
            // 小程序码
            wx.setStorageSync('qrcode', res.path);
          },
        });     
      });
    },

// 生成朋友圈图片
    share: function () {
      var conpanyCover = this.data.companyCover;
      var companyName = this.data.companyName;
      var companyPhone = this.data.companyPhone;
      var companyBusiness = this.data.companyBusiness;
      var companyAddress = this.data.companyAddress;
      var companyIntroduce = this.data.companyIntroduce;
      var user_id = wx.getStorageSync('user_id');
      var that = this;
      wx.getSystemInfo({
        success: function (res) {
          console.log(res.windowHeight)
          console.log(res.windowWidth)
          that.setData({
            windowHeight: res.windowHeight,
            windowWidth: res.windowWidth
          })
        },
      })
      var windowWidth = that.data.windowWidth;
      
      
      const ctx = wx.createCanvasContext('myCanvas')
      // 设置矩形边框
      ctx.setStrokeStyle('#fff')
      // 设置矩形宽高
      ctx.strokeRect(0, 0, 400, 200)

      let canvas = '../../resource/canvas.png';

      ctx.drawImage(canvas, 0, 0, 400, 1000)

      // 设置文字大小
      ctx.setFontSize(12)
      // 设置文字颜色
      ctx.fillStyle = '#9d9d9d';

      var str = "长按识别二维码,查看我小程序官网";
      ctx.fillText(str, (windowWidth - ctx.measureText(str).width) / 2, 510)



      var cover = '../../resource/4.png';
      ctx.drawImage(cover, 0, 0, 400, 200);


      // 名字设置
      var name = wx.getStorageSync('companyContacts');
      // 设置文字大小
      ctx.setFontSize(26)
      ctx.fillStyle = '#000';
      var name = name;
      // 填充文字
      ctx.fillText(name, 150, 65)

      // ctx.font = '微软雅黑';
      // 设置文字大小
      ctx.setFontSize(14)
      ctx.fillStyle = '#454545';
      // let canpany = ' 蚂蚁未来';
      let canpany = companyName;

      // 填充文字
      ctx.fillText('公司名:' + canpany, 45, 100)

      // 设置文字大小
      ctx.setFontSize(14)
      ctx.fillStyle = '#454545';
      var position = ' 经理';
      // 填充文字
      ctx.fillText('职位:' + position, 45, 130)


      // 联系方式
      ctx.setFontSize(14)
      ctx.fillStyle = '#454545';
      // var tel = " 15289310354";
      var tel = companyPhone;

      // 填充文字
      ctx.fillText('联系方式:' + tel, 45, 160)

      // 公司地址
      ctx.setFontSize(14)
      ctx.fillStyle = '#000';
      // 填充文字
      ctx.fillText('公司地址', 60, 370)

      // 公司业务标题
      ctx.setFontSize(14)
      ctx.fillStyle = '#000';
      // 填充文字
      ctx.fillText('公司业务', 60, 230)

      // 公司业务
      ctx.setFontSize(12)
      ctx.fillStyle = '#666';
      var text = companyBusiness;

      var chr = text.split("");//这个方法是将一个字符串分割成字符串数组
      var temp = "";
      var row = [];
      for (var a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < windowWidth - 100) {
          temp += chr[a];
        }
        else {
          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
          row.push(temp);
          temp = "";
        }
      }
      row.push(temp);

      //如果数组长度大于2 则截取前两个
      if (row.length > 2) {
        var rowCut = row.slice(0, 2);
        // 这个参数就可以判断显示几行
        var rowPart = rowCut[1];
        var test = "";
        var empty = [];
        for (var a = 0; a < rowPart.length; a++) {
          if (ctx.measureText(test).width < windowWidth) {
            test += rowPart[a];
          }
          else {
            break;
          }
        }

        empty.push(test);
        var group = empty[0]//这里只显示两行，超出的用...表示
        rowCut.splice(1, 1, group);
        row = rowCut;

      }
      for (var b = 0; b < row.length; b++) {
        ctx.fillText(row[b], 40, 253 + b * 18);
      }

      // 画线
      ctx.setFillStyle('#efefef')
      ctx.fillRect(45, 236, windowWidth - 100, 1)


      // 业务图标
      var yw = '../../resource/yw.png';
      ctx.drawImage(yw, 40, 216, 16, 16)


      // 公司简介
      ctx.setFontSize(14)
      ctx.fillStyle = '#000';
      // 填充文字
      ctx.fillText('公司简介', 60, 300)

      // 画下线
      ctx.setFillStyle('#efefef')
      ctx.fillRect(45, 306, windowWidth - 100, 1)


      // 简介图标
      var yw = '../../resource/jj.png';
      ctx.drawImage(yw, 40, 286, 16, 16)

      // 公司简介
      ctx.setFontSize(12)
      ctx.fillStyle = '#666';
      // var introduction = "蚂蚁未来科技有限公司办公室地址位于中国的首都，政治、文化中心北京，北京市朝阳区西大望路15号4号楼，注册资本为50 万元";
      var introduction = wx.getStorageSync('companyIntroduce');

      var chr = introduction.split("");//这个方法是将一个字符串分割成字符串数组
      var temp = "";
      var row = [];
      for (var a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < windowWidth - 100) {
          temp += chr[a];
        }
        else {
          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
          row.push(temp);
          temp = "";
        }
      }
      row.push(temp);

      //如果数组长度大于2 则截取前两个
      if (row.length > 2) {
        var rowCut = row.slice(0, 2);
        var rowPart = rowCut[1];
        var test = "";
        var empty = [];
        for (var a = 0; a < rowPart.length; a++) {
          if (ctx.measureText(test).width < 220) {
            test += rowPart[a];
          }
          else {
            break;
          }
        }
        empty.push(test);
        var group = empty[0]//这里只显示两行，超出的用...表示
        rowCut.splice(1, 1, group);
        row = rowCut;
      }
      for (var b = 0; b < row.length; b++) {
        ctx.fillText(row[b], 40, 322 + b * 18);
      }


      // 公司地址详情
      var chr = companyAddress.split("");//这个方法是将一个字符串分割成字符串数组
      var temp = "";
      var row = [];
      for (var a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < windowWidth - 100) {
          temp += chr[a];
        }
        else {
          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
          row.push(temp);
          temp = "";
        }
      }
      row.push(temp);


      //如果数组长度大于2 则截取前两个
      if (row.length > 1) {
        var rowCut = row.slice(0, 1);
        var rowPart = rowCut[0];
        var test = "";
        var empty = [];
        for (var a = 0; a < rowPart.length; a++) {
          if (ctx.measureText(test).width < 220) {
            test += rowPart[a];
          }
          else {
            break;
          }
        }
        empty.push(test);
        var group = empty[0]//这里只显示两行，超出的用...表示
        rowCut.splice(1, 1, group);
        row = rowCut;
      }
      for (var b = 0; b < row.length; b++) {
        ctx.fillText(row[b], 40, 390);
      }


      // 画下线
      ctx.setFillStyle('#efefef')
      ctx.fillRect(45, 375, windowWidth - 100, 1)


      // 地址图标
      var yw = '../../resource/dz.png';
      ctx.drawImage(yw, 40, 356, 16, 16)


      

      // 小程序二维码
      // var path1 = data.path;
      var qrcode = wx.getStorageSync('qrcode');
      console.log(qrcode)
      ctx.drawImage(qrcode, (windowWidth - 80) / 2, 410, 80, 80)
      
        ctx.draw(false, function () {
          wx.canvasToTempFilePath({
            canvasId: 'myCanvas',
            success: function (res) {
              console.log(res.tempFilePath)
              // wx.previewImage({
              //   urls: [res.tempFilePath] // 需要预览的图片http链接列表
              // })
              that.setData({
                prurl: res.tempFilePath,
                hidden: false
              })
            }
          })
        });
     
    },

点击保存图片

// 保存图片到本地
    save:function(){
      var that = this
      wx.saveImageToPhotosAlbum({
        filePath: that.data.prurl,
        success(res) {
          wx.showModal({
            content: '图片已保存到相册，赶紧晒一下吧~',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#333',
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定');
                /* 该隐藏的隐藏 */
                that.setData({
                  hidden: true
                })
              }
            }
          })
        }
      })
    },