Painter画板地址 http://liangei.gitee.io/limeui-docs/components/painter/
Painter画板在uniapp插件市场的地址:https://ext.dcloud.net.cn/plugin?id=2389
1,页面使用
<l-painter isRenderImage :width="'686rpx'" :height="'930rpx'" custom-style="position: fixed; top:10px; left: 500%;" ref="painter" @success="poster($event)"/>
2,导入组件
import lPainter from "@/components/lime-painter/index.vue"
components:{
'l-painter':lPainter
},
3,画板样式
onShareLoad(){
let that=this;
let base={
width: '686rpx',
height: '950rpx',
views: [
{
css: {
width: '686rpx',
height: '500rpx',
display: "inline-block",
},
views: [
{
type: 'image',
src: '../../static/bg1.png',
mode: 'scaleToFill',
css: {
radius: '32rpx 32rpx 0rpx 0rpx',
left: '0rpx',
top: '0rpx',
width: '686rpx',
height: '500rpx',
}
}
],
type: "view"
},
{
css: {
width: '686rpx',
height: '190rpx',
display: "inline-block",
background: '#ffffff',
},
views: [
{
type: 'text',
text:'¥',
css: {
color: '#FE4F02',
left: '30rpx',
top: '550rpx',
fontSize: '26rpx',
lineHeight: '45rpx'
}
},
{
type: 'text',
text:'1688.00',
css: {
color: '#FE4F02',
left: '60rpx',
top: '550rpx',
fontWerght: 'bold',
fontSize: '52rpx',
lineHeight: '45rpx'
}
},
{
type: 'text',
text: 'uniapp使用l-painter画板,海报uniapp使用l-painter画板,海报',
css: {
maxLines: 1,
width: '630rpx',
color: '#1A1A1A',
left: '32rpx',
top: '620rpx',
fontSize: '32rpx',
fontWerght: 'bold',
lineHeight: '45rpx'
}
}
],
type: "view"
},{
css: {
width: '686rpx',
height: '52rpx',
display: "inline-block",
},
views:[
{
type: 'image',
src: '../../static/line.png',
mode: 'scaleToFill',
css: {
left: '0rpx',
top: '690rpx',
width: '686rpx',
height: '52rpx',
}
}
],
type: "view"
},{
css: {
width: '686rpx',
height: '180rpx',
display: "inline-block",
background: '#ffffff',
radius: '0rpx 0rpx 32rpx 32rpx',
},
views:[
{
type: 'text',
text: '购买热线',
css: {
left: '40rpx',
top: '770rpx',
fontSize: '28rpx',
color:'#999999'
}
},
{
type: 'image',
src: '../../static/phone.png',
mode: 'widthFix',
css: {
left: '184rpx',
top: '770rpx',
width: '36rpx',
height: '36rpx',
}
},
{
type: 'text',
text: '手机号码',
css: {
left: '240rpx',
top: '770rpx',
fontSize: '28rpx',
fontWerght: 'bold',
}
},
{
type: 'text',
text: '150-1234-4567',
css: {
left: '360rpx',
top: '770rpx',
fontSize: '28rpx',
fontWerght: 'bold',
}
},
{
type: 'image',
src: '../../static/wechat.png',
mode: 'widthFix',
css: {
left: '184rpx',
top: '840rpx',
width: '36rpx',
height: '36rpx',
}
},
{
type: 'text',
text: '微信号码',
css: {
left: '240rpx',
top: '840rpx',
fontSize: '28rpx',
fontWerght: 'bold',
}
},
{
type: 'text',
text: 'csc1234',
css: {
left: '360rpx',
top: '840rpx',
fontSize: '28rpx',
fontWerght: 'bold',
}
},
],
type: "view"
},
{
css: {
top:'360rpx',
left:'480rpx',
width: '170rpx',
height: '220rpx',
display: "inline-block",
background: '#ffffff',
borderRadius:'16rpx',
boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
},
views:[
{
type: 'text',
text: '产品详情二维码',
css: {
width:'280rpx',
top: '540rpx',
left: '488rpx',
fontSize: '22rpx',
color:'#1A1A1A'
}
},
{
type: 'image',
src: '../../static/logo.png',
mode: 'widthFix',
css: {
top: '370rpx',
left: '484rpx',
width: '160rpx',
height: '160rpx',
borderRadius:'50%'
}
}
],
type:"view"
}
]
}
const painter = that.$refs.painter;
painter.render(base);
},
4,下载海报,这里区分了h5下载和小程序下载
poster(event) {
console.info(event)
let path = event;
let that=this;
// #ifdef H5
var eleLink = document.createElement('a');
eleLink.download = "filename";
eleLink.style.display = 'none';
eleLink.href = path;
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
// #endif
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: path,
success(res) {
that.painterShow = false;
that.show=false;
uni.showToast({
title: '已保存到相册',
icon: 'success',
duration: 2000
})
}
})
// #endif
},