微信小程序 生成图片分享到朋友圈

1、canvas

2、painter插件    https://github.com/Kujiale-Mobile/Painter  （git下载地址  可以去看详情）

shareFriend(){

var that = this;

wx.showLoading({

  title: '图片生成中'

})

this.setData({

imgDraw: {

  width: '300px',

  height: '450px',

  background:"#fff",

views: [

{

type: 'image',

url: that.data.contentDetailAvatar,

css: {

top: '10px',

left: '10px',

width: '40px',

height: '40px',

borderRadius: '20px'

},

},

{

type: 'text',

text: that.data.contentDetailNickName,

css: {

top: '20px',

fontSize: '16px',

fontWeight: 'bold',

left: '60px',

align: 'left',

color: '#3c3c3c'

}

},

{

type: 'text',

text: that.data.contentDetailTitle,

css: {

top: '60px',

left: '150px',

width: '280px',

fontSize: '18px',

maxLines: '2',

lineHeight: '20px',

fontWeight: 'bold',

align: 'center',

color: '#3c3c3c'

}

},

{

type: 'image',

url: src[1],

css: {

top: '110px',

left: '150px',

align: 'center',

width: '280px',

height: '200px',

mode: 'aspectFill',

}

},

{

type: 'text',

text: that.data.contentDetailContent.replace(/<(\/)?[^>].*?>/g, ''),

css: {

top: '110px',

left: '150px',

width: '280px',

maxLines: '10',

fontSize: '16px',

lineHeight: '20px',

align: 'center',

color: '#3c3c3c'

}

},

{

type: 'image',

url: that.data.qrcodeUrl,

css: {

top: '330px',

left: '20px',

width: '100px',

height: '100px',

}

},

{

type: 'text',

text: '长按识别小程序码',

css: {

top: '360px',

left: '140px',

fontSize: '16px',

color: '#3c3c3c'

}

},

{

type: 'text',

text: '进入查看详情内容',

css: {

top: '380px',

left: '140px',

fontSize: '16px',

color: '#3c3c3c'

}

},

]

}

})

},

最后生成