这是生成的效果图,要完成这个功能其实只要引入第三方包就可以轻松的完成具体可参考:
原项目地址：https://github.com/Kujiale-Mobile/Painter
新版地址：https://github.com/shesw/Painter
1.首先在需要使用的页面引入
"usingComponents": {
"painter":"../../components/painter/painter"
}
2.这是我的wxml
<view class="box" >
<painter :dirty='true' customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />
<image mode="widthFix" class="box_image" src="{{image}}" bindtap="previewImg" />
view>
3.这是我的wxss
.box_image{
position: absolute;
margin: 0 auto;
top: 0rpx;
width: 514rpx;
border-radius: 10rpx;
}
.box{
position: fixed;
height: 900rpx;
top: 20%;
left: 132rpx;
z-index: 999;
width:514rpx;
}
4.这是我的js
data:{
template: {},
image:""
}
canvasSuc(e) {
wx.hideLoading()
this.setData({
image: e.detail.path,
show_share: false
})
},
getDraw() {
wx.showLoading({
title: '正在努力生成中',
})
this.setData({
template: {
background: '#fff',
width: 750 + 'rpx',
height: 1200 + 'rpx',
align: 'center',
views: [{
type: 'image',
url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/%E5%BA%97%E9%93%BA%E6%B4%BB%E5%8A%A8-bg.png',
css: {
top: '0px',
right: '0px',
width: '750rpx',
height: '900rpx',
mode: "widthFix"
},
},
{
type: 'image',
url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/%E6%96%87%E6%A1%88%E8%83%8C%E6%99%AF%403x.png',
css: {
top: '268rpx',
right: '45rpx',
width: '660rpx',
height: '84rpx',
mode: "widthFix"
},
},
{
type: 'image',
url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/Cm8fPRsSXS.png',
css: {
top: '400rpx',
left: '26rpx',
width: '324rpx',
height: '400rpx',
mode: "widthFix"
},
},
{
type: 'image',
url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/Cm8fPRsSXS.png',
css: {
top: '400rpx',
right: '26rpx',
width: '324rpx',
height: '400rpx',
mode: "widthFix"
},
},
{
type: 'image',
url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',
css: {
top: '400rpx',
left
: '26rpx',
width: '324rpx',
height: '300rpx',
mode: "widthFix"
},
},
{
type: 'image',
url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',
css: {
top: '400rpx',
right: '26rpx',
width: '324rpx',
height: '300rpx',
mode: "widthFix"
},
},
{
type: 'image',
url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/sMhA2YRBsd.png',
css: {
top: '660rpx',
left: '26rpx',
width: '320rpx',
height: '60rpx',
mode: "widthFix"
},
},
{
type: 'image',
url: 'http://vrjgd.oss-cn-hangzhou.aliyuncs.com/pcw/sMhA2YRBsd.png',
css: {
top: '660rpx',
right: '26rpx',
width: '320rpx',
height: '60rpx',
},
},
{
type: 'text',
text: '60',
css: {
top: '670rpx',
left: "66rpx",
fontSize: '34rpx',
color: "#fff",
},
},
{
type: 'text',
text: '60',
css: {
top: '675rpx',
left: "126rpx",
fontSize: '28rpx',
color: "#fff",
textDecoration: 'line-through',
},
},
{
type: 'text',
text: '60',
css: {
top: '670rpx',
right: "266rpx",
fontSize: '34rpx',
color: "#fff",
},
},
{
type: 'text',
text: '60',
css: {
top: '675rpx',
right: "206rpx",
fontSize: '28rpx',
color: "#fff",
textDecoration: 'line-through',
},
},
{
type: 'text',
text: '商品名称名8个字',
css: {
top: '740rpx',
right: "66rpx",
fontSize: '34rpx',
color: "#fff",
},
},
{
type: 'text',
text: '商品名称名8个字',
css: {
top: '740rpx',
left: "66rpx",
fontSize: '34rpx',
color: "#fff",
},
},
{
type: 'image',
url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/1525ead3c1f45071184.png',
css: {
bottom: '40rpx',
right: '40rpx',
width: '200rpx',
height: '200rpx',
},
},
{
type: 'image',
url: 'https://vrjgd.oss-cn-hangzhou.aliyuncs.com/7785499/1592556154750/303876.jpg',
css: {
bottom: '70rpx',
left: '40rpx',
width: '160rpx',
height: '160rpx',
borderRadius: '50%',
},
},
{
type: 'text',
text: '欢迎来到我的店铺',
css: {
top: '290rpx',
left: "250rpx",
fontSize: '34rpx',
color: "#fff",
},
},
{
type: 'text',
text: '店铺名称限制8字',
css: {
bottom: '160rpx',
left: "200rpx",
fontSize: '32rpx',
color: "#000",
},
},
{
type: 'text',
text: '邀请码：12345678',
css: {
bottom: '100rpx',
left: "200rpx",
fontSize: '28rpx',
color: "#000",
},
},
{
type: 'text',
text: '金戈多生鲜店铺',
css: {
top: '100rpx',
left: "380rpx",
fontSize: '48rpx',
color: "#fff",
align: 'center',
},
},
],
}
})
},
previewImg() {
wx.previewImage({
current: this.data.image,
urls: [this.data.image],
success:res=>{
this.setData({
isbox:false
})
}
})
},
强力驱动