收藏
回答

自定义分享图片的问题

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 需求 工具 6.5.3 2.3.0

- 希望在调用onShareAppMessage方法之前通过canvas对图片绘制,生成自定义的分享图片


- 如何在分享之前对图片进行绘制?


相关代码:

wxml:

<button open-type='share' bindtap='myShare' >分享</button>

<canvas  canvas-id='c' style='width:750px;height:400px'></canvas>


js:

onReady: function () {

var that = this;

ctx.drawImage('/images/test.jpg', 0, 0, 750, 400);

ctx.setFillStyle('red');

ctx.setFontSize(30)

ctx.fillText('hello', 30, 30);

ctx.draw(true, setTimeout(() => {


wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 750,

height: 400,

destWidth: 750,

destHeight: 400,

canvasId: 'c',

success(res) {

// console.log(res.tempFilePath);

that.setData({

img: res.tempFilePath

})

console.log(that.data.img)


}

})


}, 100))

},

onShareAppMessage: function () {

console.log(this.data.img)

return {

title: '这是title',

imageUrl: this.data.img

}


}

我在onReady里面先绘制好自定义的图片可以实现,但是怎么才能在点击分享按钮时 实现呢?

最后一次编辑于  2018-10-17
回答关注问题邀请回答
收藏

2 个回答

  • +n
    +n
    2018-10-18

    是的,可以在进入页面的时候就开始绘制canvas并保存到缓存,如果是让用户点击按钮导出,那可以设置一个loading,缓存成功了再显示转发按钮

    2018-10-18
    赞同 1
    回复 1
    • 五彩斑斓的白
      五彩斑斓的白
      2018-10-19

      感谢回答

      2018-10-19
      回复
  • 卢霄霄
    卢霄霄
    2018-10-17

    不能再点分享的时候去绘制,来不及,不会等你。。

    2018-10-17
    赞同
    回复 11
    • 五彩斑斓的白
      五彩斑斓的白
      2018-10-17

      所以只能在之前绘制吗? 另外我写的这个在手机上预览没问题,但是在开发者工具上不显示图片,请问是什么原因?

      2018-10-17
      回复
    • 卢霄霄
      卢霄霄
      2018-10-17回复五彩斑斓的白

      看起来是对的,方便做个代码片段吗?

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2018-10-17
      回复
    • 五彩斑斓的白
      五彩斑斓的白
      2018-10-17回复卢霄霄

      你好,链接地址   wechatide://minicode/8rY9udmN7V3j

      2018-10-17
      回复
    • 卢霄霄
      卢霄霄
      2018-10-17回复五彩斑斓的白

      你好,你有绘制头像是吧。。你需要把头像的域名加入 downloadFile 的白名单,然后下载下来再绘制


      2018-10-17
      回复
    • 五彩斑斓的白
      五彩斑斓的白
      2018-10-17回复卢霄霄

      嗯嗯,头像那个问题我查过了,谢谢。开发者工具预览看不到效果是工具的问题吗?

      2018-10-17
      回复
    查看更多(6)