下载painter
git 地址
components/painter 下载放在本地单独创建一个文件夹
1662557366380.jpg
<view class="box">
<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />
<image mode="widthFix" src="{{image}}" bindtap="previewImg" />
// 写自己的底部样式
<view class="save" hover-class="hoverClick" bindtap="getSave">保存图片</view>
</view>
下载一定要先调用 getImageInfo 要不然下载不下来，这是我本人踩得坑 一定要先调用 getImageInfo 一定要先调用 getImageInfo 重要的事情说三遍
data: {
Draw: false,
template: {},
image: "",
show: false,
width: 750,
height: 1060,
userInfo: '',
shaareText: false,
},
/**
* 组件的方法列表
*/
methods: {
canvasClick() {
this.setData({
canvasSwith: true
})
this.getDraw()
},
onClickHide() {
this.setData({ canvasSwith: false, image: '', shaareText: false });
},
getDraw() {
wx.showLoading({
title: '正在努力生成中',
})
this.setData({
template: {
background: '#fff',
width: this.data.width + 'px',
height: this.data.height + 'px',
views: [
{
type: 'image',
url: this.data.userInfo.inviteBannerUrl,
css: {
top: '0px',
left: '0px',
width: "100%",
heigth: '400px',
borderRadius: '12px'
},
},
{
type: 'image',
url: this.data.userInfo.avatar.replace('http://thirdwx.qlogo.cn', 'https://wx.qlogo.cn'),
css: {
top: '700px',
left: '24px',
width: '70px',
height: '70px',
borderRadius: '35px'
},
},
{
type: 'text',
text: this.data.userInfo.nickName,
css: {
top: '715px',
left: '120px',
fontSize: '28px',
fontWeight: 400,
color: '#858B9C',
},
},
{
type: 'text',
text: "为你推荐“汽车保养分享赚钱”",
css: {
top: '785px',
left: '24px',
fontSize: '30px',
fontWeight: 500,
color: '#111A34',
},
},
{
type: 'image',
url: '../../images/mine/直线 3@2x (1).png',
css: {
top: '870px',
left: '0',
width: '750px',
height: '4px',
},
},
{
type: 'text',
text: "长按识别",
css: {
top: '920px',
left: '24px',
fontSize: '28px',
fontWeight: 400,
color: '#858B9C',
},
},
{
type: 'text',
text: "xxx",
css: {
top: '975px',
left: '24px',
fontSize: '30px',
fontWeight: 500,
color: '#111A34',
},
},
{
type: 'image',
url: this.data.userInfo.inviteWxUrl,
css: {
top: '900px',
left: '80%',
width: '120px',
height: '120px',
borderRadius: '50%'
},
},
],
}
})
},
// 生成成功
canvasSuc(e: any) {
console.log(e, '--------------------------')
wx.hideLoading()
this.setData({
image: e.detail.path,
shaareText: true,
})
},
getSave() {
wx.getImageInfo({
src: this.data.image,
success: function (res) {
var path = res.path;
wx.getSetting({
success: (set) => {
wx.saveImageToPhotosAlbum({
filePath: path,
success: (res) => {
if (res.errMsg == "saveImageToPhotosAlbum:ok") {
wx.showToast({
title: '保存成功',
});
}
}
})
if (set.authSetting['scope.writePhotosAlbum'] == false) {
wx.openSetting()
}
}
})
}
})
},
