小程序分享生成图片

首先先在前台页面生成一个能够放图片cnavas的框，然后JS获取到各种信息，进行绘图（注意：绘图信息里只要有字段信息没有

或者错误），开发工具 就会显示透明版。放到cnavas掩藏着。点击生成的时候，显示出来。

 

 

WXML

 

<view style='width:0px;height:0px;overflow:hidden;'>
<canvas canvas-id="shareImg" style="width:700px;height:710px"></canvas>
  
</view>

<!-- 预览区域  -->
<view hidden='{{hidden}}' class='preview'   catchtouchmove='true' >
 <image bindtap='closetype' class='close' src="../../resource/images/gb.png"></image>
 
  <image class='tu' src='{{prurl}}' mode='widthFix' ></image>
  <button class='resave' type='primary' size='mini' bindtap='share'>重新加载</button>
  <button class='save' type='primary' size='mini' bindtap='save'>保存分享图</button>
</view>

<image bindtap='share' class='fenx' src="../../resource/images/fx.png"></image>

js

 onLoad: function (e) {
    wx.setNavigationBarTitle({
      title: wx.getStorageSync('companyinfo').name,
    })

    var that = this;
    if (this.data.id > 0) {
      var id = this.data.id;
    } else {
      var id = e.id;
      this.data.id = e.id;
    }
    //初始化导航数据
    app.util.request({
      'url': ' ',
      data: { id: id },
      success: function (res) {
        if (!res.data.message.errno) {
          var houseDetail = R_htmlToWxml.html2json(res.data.data.list.content);
          var articleId = ' /';
          that.data.title = res.data.data.list.housename;
          that.data.address = res.data.data.list.houseaddress;
          that.data.houseprice = res.data.data.list.houseprice;
          that.data.piclist =res.data.data.piclist;
          that.data.housecase = res.data.data.housecase;
          that.data.houseareaid = res.data.data.list.houseareaid;
          that.data.companyinfo = wx.getStorageSync('companyinfo').name;
          that.data.productspecial = res.data.data.list.productspecial;
          that.data.areaname = res.data.data.list.areaname;

          wx.setNavigationBarTitle({
            title: that.data.title + '-' + wx.getStorageSync('companyinfo').name,
          })

          that.setData({
            data: res.data.data.list,
          
          })



        }
      },
      complete: function () {


        wx.hideNavigationBarLoading(); //完成停止加载
        wx.stopPullDownRefresh();
      }
    });//通过后台获取二维码
    app.util.request({
      'url': ' ',
      data: {
        appid: " ",
        appsecret: " ",
      
      },
      success: function (res) {
        if (!res.data.errno) {
          that.data.code = res.data;
          var promise1 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: that.data.code,
              success: function (res) {
                console.log(res)
                resolve(res);
              }
            });
          })
          var promise2 = new Promise(function (resolve, reject) {
            wx.getImageInfo({
              src: that.data.thumb,
              success: function (res) {
                console.log(res)
                resolve(res);
              }
            });
          })
          Promise.all([
            promise1, promise2
          ]).then(res => {
            console.log(res)
            const ctx = wx.createCanvasContext('shareImg')

            //主要就是计算好各个图文的位置 //下面都是从后台获取到的数据，如果不需要的话，可以直接写文字。
            ctx.setFillStyle('#ffffff')
            ctx.fillRect(0, 0, 700, 710)
            ctx.drawImage(res[1].path, 0, 0, 700, 400)
            ctx.drawImage(res[0].path, 345, 500, 180, 160)
            // ctx.setTextAlign('center')            
            ctx.setFontSize(30)
            ctx.setFillStyle('#000000')
            ctx.setTextAlign('center')
            ctx.fillText(that.data.title, 280, 30,500)
            ctx.setFillStyle('#ffffff')
            ctx.setTextAlign('center')
            ctx.fillText(that.data.title, 285, 30, 500)
            ctx.setFillStyle('#000000')
            ctx.setTextAlign('left')
            ctx.fillText(that.data.productspecial, 0, 450,500)
            ctx.fillText(that.data.areaname, 0, 500, 500)
            ctx.fillText(that.data.housetypename, 100, 500, 500)
            ctx.setFillStyle('red')
            ctx.setFontSize(40)
            ctx.fillText(that.data.houseprice, 0, 550,500)
            ctx.fillText("元/㎡", 130, 550, 500)
            ctx.setFontSize(30)
            ctx.fillText("长按识别", 350, 500, 500)
            ctx.setFontSize(24)
            ctx.setTextAlign('center')
            ctx.setFillStyle('#000000')
            ctx.fillText(that.data.companyinfo, 280, 700)
            ctx.stroke()
            ctx.draw()
          })
        }
      }
    });


  },

  closemsg: function (e) {

    this.data.showmsg = true;
    this.setData({
      showmsg: this.data.showmsg
    })

  },

  /**
   * 生成分享图
  */
  share: function () {
    var that = this
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 545,
      height: 771,
      destWidth: 545,
      destHeight: 771,
      canvasId: 'shareImg',
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          prurl: res.tempFilePath,
          hidden: false
        })
        wx.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },

  /**
   * 保存到相册
  */
  save: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              that.setData({
                hidden: true
              })
            }
          }
        })
      }
    })

  },
  closetype: function (e) {

    this.data.hidden = true;
    this.setData({
      hidden: this.data.hidden
    })

  },

wxss

canvas{
  position: fixed;
  top: 0;
  z-index:-10;
  left: 1000px;
  margin-top: 1000px;
}
.preview {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.9);
  position: absolute;
  z-index: 2;
}
.preview .tu{
  width: 70%;
  position: absolute;
  top: 10%;
  left: 15%;
  z-index: 3;
  border: 1px dashed #fff;
}
.preview .save{
  width: 40%;
  position: absolute;
  bottom: 177rpx;
  left: 51%;
  
}
.preview .resave{
  width: 40%;
  position: absolute;
  bottom: 177rpx;
  left: 7%;
  
}
.preview .close{
  
  position: absolute;
  top: 3%;
  left: 48%;
  width: 8%;
  height: 5%;
  z-index: 999;
  
}