微信小程序 生成图片分享到朋友圈
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'
}
},
]
}
})
},
最后生成