In some projects, there are some requirements that require the function of sharing posters. Today I will share with you a plug-in I use in uniapp development, which can be laid out in any way. Super easy to use
Document link arrangement: https://ext.dcloud.net.cn/plugin?id=2389
Introduce plug-ins
Download the plugin from the link above and import it
import lPainter from '@/components/lime-painter/'//存放插件的路径，可能跟我的不一样
export default {
components: {
lPainter}
}
Basic usage
The board artboard needs to pass a style JSON object, artboard attributes width, height, and element array views. The current element types include view, text, image, qrcode
css. The positions in the object are absolute positioning relative to the artboard, and rpx and px are supported.
It is recommended to create a new file to store the poster.
I created a new canvas-poster.vue.
//canvas-poster.vue
<template>
<view>
//isRenderImage绘制完之后生成图片 生成图片后的回调函数
<l-painter :board="base" isRenderImage @success='changeImg'/>
</view>
</template>
Simply try to layout the layout on the drawing board to get the effect you want.
import lPainter from '@/components/lime-painter/'
export default {
components: {
lPainter}
}
export default {
data() {
return {
base: {
width: '686rpx',
height: '130rpx',
views: [
{
type: 'view',
css: {
left: '0rpx',
top: '0rpx',
background: '#07c160',
width: '120rpx',
height: '120rpx'
}
},
{
type: 'text',
css: {
left: '180rpx',
top: '18rpx',
background: '#1989fa',
width: '80rpx',
height: '80rpx',
transform: 'transform: rotate(50deg)'
}
}
]
}
}
}
}
One thing to note when using qrcode QR code is
that you need to download qrcode.js from https://gitee.com/liangei/lime-painter/blob/master/qrcode.js to overwrite the qrcode.js in the plug-in directory to take effect.
{
type: 'qrcode',
text: '二维码内容',
css: {
left: '380rpx',
top: '230rpx',
width: '200rpx',
height: '200rpx',
color: '#1989fa',
backgroundColor: 'rgba(25,137,250,.1)'//二维码底色
border: '20rpx solid rgba(25,137,250,.1)',
}
}
Finally get the picture
methods: {
changeImg(imgUrl) {
//如果是在主页面使用这插件可以直接定义一个变量保存图片地址
this.imgUrl=imgUrl
//如果是想我一样另外进行封装就直接用$emit传递给父组件
this.$emit('onChange',imgUrl)
}
}
In the parent component, you can directly call the interface to get the imgUrl.
//父组件
<template>
<view>
//isRenderImage绘制完之后生成图片 生成图片后的回调函数
<canvas-poster @onChange='getImgUrl'></canvas-poster>
<u-button type="primary" @click='savePicture'>保存图片</u-button>
</view>
</template>
<script>
export default {
data（）{
return {
imgUrl:''
}
}，
methods: {
changeImg(imgUrl) {
this.imgUrl=imgUrl
}
savePicture(){
//下载图片到系统相册中
uni.saveImageToPhotosAlbum({
filePath: this.imgUrl,
success: function () {
console.log('保存成功');
}
});
}
}
}
</script>
Okay, that’s the basic development process. If it’s useful to you, please like and save it. Thank you for your support!
If you have any questions or better suggestions, you can leave them in the comment area below, thank you.