微信小程序分享自定义图片

效果图

image.png image.png

微信小程序分享的时候需要自定义样式，也就是自己绘图，然后分享

代码
wxml

<view class="canvas" hidden="{{imageUrl}}">
    <canvas class="canvas" canvas-id="myCanvas" style="width:{{750*rpx}}px;height:{{screenHeight*0.8*rpx}}px;z-index: -1;"></canvas>
</view>

js

onLoad: function (options) {
  let that = this
   wx.getSystemInfo({
      success(res) {
        console.log(res.windowWidth)
        that.setData({
          rpx: res.windowWidth / 750,
          screenHeight: res.screenHeight
        })

      }
    })
 
   wx.getImageInfo({
          src: res.data.house.img_path[0],
          success(res) {
            console.log(res)
            that.setData({
              coverimg: res.path
            })
            that.drawImg()
          }
        })
},
drawImg() {
    let that = this
    const rpx = this.data.rpx
    const ctx = wx.createCanvasContext('myCanvas')
    console.log(that.data.coverimg)

    ctx.drawImage(that.data.coverimg, 0, -280 * rpx, 750 * rpx, 600 * rpx)
    ctx.save()

    ctx.setFontSize(34 * rpx)
    let txt = that.data.house.rent_type ? that.data.house.rent_type + '·' + that.data.house.house_name : that.data.house.house_name
    if (txt.length > 20) {
      txt = txt.substring(0, 20) + '...'
    }
    ctx.fillText(txt, 30 * rpx, 380 * rpx)

    ctx.setStrokeStyle('#EDEDED')
    ctx.moveTo(30 * rpx, 410 * rpx)
    ctx.lineTo(720 * rpx, 410 * rpx)
    ctx.stroke()

    let txt1 = '租金'
    let txt2 = '€' + that.data.house.price + '/月'

    let tt1 = '€'
    let tt2 = '/月'
    let tt3 = that.data.house.price


    let txt3 = '房源类型'
    let txt4 = that.data.house.rent_type

    let txt5 = '房型'
    let txt6 = that.data.house.room

    ctx.setFontSize(26 * rpx)
    ctx.setFillStyle('#989898')
    ctx.setTextAlign('center')
    ctx.fillText(txt1, 130 * rpx, 480 * rpx)

    // ctx.setFontSize(36 * rpx)
    // ctx.setFillStyle('#FF5200')
    // ctx.setTextAlign('center')
    // ctx.fillText(txt2, 130 * rpx, 530 * rpx)

    // ctx.font="26px";
    // 价格
    const metrics = ctx.measureText(txt2)
    // console.log(metrics.width)

    ctx.font="24px";
    let l1 =  Number(ctx.measureText(tt1).width)
    let l2 =  Number(ctx.measureText(tt2).width)
    ctx.font="36px";
    // + tt3.toString().length * 1.5 * rpx
    let l3 = Number(ctx.measureText(tt3).width) + tt3.toString().length * 6 * rpx

    console.log('l3',l3)

    // ctx.setFontSize(24 * rpx)
    // ctx.setFillStyle('#FF5200')
    // ctx.fillText(tt1, (750 - Number(metrics.width) - 567) / 2 * rpx, 530 * rpx)

    // ctx.setFontSize(36 * rpx)
    // ctx.fillText(tt3, (750 - Number(metrics.width) - 567 + 40) / 2 * rpx + Number(ctx.measureText(tt1).width) * 2 , 530 * rpx)
    // console.log(Number(ctx.measureText(tt1+tt3).width),Number(ctx.measureText(tt3).width))

    // ctx.setFontSize(24 * rpx)
    // ctx.fillText(tt2,(750 - Number(metrics.width) - 567 -10) / 2 * rpx + Number(ctx.measureText(tt3).width) * 2, 530 * rpx)
    
    ctx.setTextAlign('left')
    ctx.setFontSize(24 * rpx)
    ctx.setFillStyle('#FF5200')
    let ll = Number(l1) + Number(l2) + Number(l3)
    console.log('ll',ll)
    ctx.fillText(tt1, 130 * rpx - ll/2, 530 * rpx)


    ctx.setFontSize(36 * rpx)
    ctx.fillText(tt3, 130 * rpx - ll/2 + l1, 530 * rpx)


    ctx.setFontSize(24 * rpx)
    ctx.fillText(tt2, 130 * rpx - ll/2 + l3 + l1, 530 * rpx)





    // ------

    ctx.setFontSize(26 * rpx)
    ctx.setFillStyle('#989898')
    ctx.setTextAlign('center')
    ctx.fillText(txt3, 363 * rpx, 480 * rpx)

    ctx.setFontSize(30 * rpx)
    ctx.setFillStyle('#1A1A1A')
    ctx.setTextAlign('center')
    ctx.fillText(txt4, 363 * rpx, 530 * rpx)

    // ------

    ctx.setFontSize(26 * rpx)
    ctx.setFillStyle('#989898')
    ctx.setTextAlign('center')
    ctx.fillText(txt5, 595 * rpx, 480 * rpx)

    ctx.setFontSize(30 * rpx)
    ctx.setFillStyle('#1A1A1A')
    ctx.setTextAlign('center')
    ctx.fillText(txt6, 595 * rpx, 530 * rpx)

    ctx.draw(true, function (res) {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: function (res) {
          console.log(res)
          var image = res.tempFilePath;

          mini.uploadFile(config.host + config.entry + 'Basic/saveFile', image, {}, function (res) {
            console.log(res)
            if (res.code == 1) {
              var imageUrl = res.data.url;
              that.setData({
                imageUrl
              })
              wx.hideLoading()
            } else {
              // mini.alert('上传文件失败');
            }
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    })

  },

配置分享

 /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    var that = this

    if (res.from === 'button') {
      // 来自页面内转发按钮
    }
    return {
      title: that.data.type == 1 ? (that.data.house.rent_type ? that.data.house.rent_type + '·' + that.data.house.house_name : that.data.house.house_name) : '期望租金',
      path: '/pages/Index/detail/detail?id=' + that.data.id + '&type=' + that.data.type,
      imageUrl: that.data.imageUrl || that.data.house.img_path[0] || ''
    }
  }