但凡早知道这个插件，我也不至于加班到12点！

大家好，我是「前端实验室」爱分享的了不起~

上周开发一个分享海报功能，因为画布问题和布局问题导致图片有些压缩变形，改到半夜十二点才解决掉问题。隔天同事推荐了一个插件，重写了一遍才用了半小时!!! 而且效果十分完美。今天就把这个插件分享给大家

lime-painter

lime-painter是一款 uniapp 海报画板，更优雅的海报生成方案，支持多种方式生成海报，同时也支持书写css

使用方式

lime-painter插件提供 JSON 及 Template 两种方式绘制海报

方式一: Template

提供l-painter-view、l-painter-text、l-painter-image、l-painter-qrcode四种类型组件
通过 css 属性绘制样式，与 style 使用方式保持一致。

代码语言：javascript复制

<l-painter>
<template v-if="show">
    <l-painter-view
        css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"
    ></l-painter-view>
    <l-painter-view
        css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"
    ></l-painter-view>
    <l-painter-view
        css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"
    ></l-painter-view>
<template>
</l-painter>

方式二：JSON

在 json 里有四种类型的组件可以用：type为 view、text、image、qrcode
css 的 key 值使用小驼峰形式：lineHeight

可以通过 board 设置海报所需的 JSON 数据进行绘制或ref获取组件实例调用组件内的render(json)

代码语言：javascript复制

<l-painter :board="poster"/>

代码语言：javascript复制

data() {
    return {
        poster: {
            css: {
                // 根节点若无尺寸，自动获取父级节点
                width: '750rpx'
            },
            views: [
                {
                    type: "view",
                    css: {
                        background: "#07c160",
                        height: "120rpx",
                        width: "120rpx",
                        display: "inline-block"
                    }
                },
                {
                    type: "view",
                    css: {
                        background: "#1989fa",
                        height: "120rpx",
                        width: "120rpx",
                        borderTopRightRadius: "60rpx",
                        borderBottomLeftRadius: "60rpx",
                        display: "inline-block",
                        margin: "0 30rpx"
                    },
                    views: [],
                },
            ]
        }
    }
}

组件类型

个人比较喜欢使用JSON的方式开发海报，比较自由，灵活度高，封装之后只需要传入不同的json数据就可以快速得到一个海报类型

所以接下来的介绍都是使用json类型进行开发

view 类型

view 类似于 div 可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树,在 JSON 里具有 views 的数组字段，用于嵌套承载节点。

代码语言：javascript复制

data() {
    return {
        poster: {
            css: {
                // 根节点若无尺寸，自动获取父级节点
                width: '750rpx'
            },
            views: [
                {
                    type: "view",
                    css: {
                        background: "#1989fa",
                        height: "120rpx",
                        width: "120rpx",
                        borderTopRightRadius: "60rpx",
                        borderBottomLeftRadius: "60rpx",
                        display: "inline-block",
                        margin: "0 30rpx"
                    },
                    views: [],
                },
            ]
        }
    }
}

text文本类型

通过 text 属性填写文本内容，并且支持n换行符

代码语言：javascript复制

{
    type: 'text',
    text: '登鹳雀楼n白日依山尽，黄河入海流n欲穷千里目，更上一层楼',
    css: {
        // 设置居中对齐
        textAlign: 'center',
        // 设置中划线
        textDecoration: 'line-through'
    }
},

Image 图片

通过 src 属性填写图片路径。

注意：使用网络图片时：H5 和 Nvue 需要决跨域问题

代码语言：javascript复制

{
    type: 'image',
    src: 'https://img.yuanmabao.com/zijie/pic/2023/11/08/vssxma4mjef.jpg',
    css: {
        width: '200rpx',
        height: '200rpx',
        objectFit: 'contain'
    }
},

Qrcode 二维码

type属性为qrcode

代码语言：javascript复制

{
    type: 'qrcode',
    text: 'limeui.qcoon.cn',
    css: {
        width: '200rpx',
        height: '200rpx',
    }
}

如何生成图片

有两种方式可以生成图片

第一种是通过设置isCanvasToTempFilePath自动生成图片并在 @success 事件里接收海报临时路径

代码语言：javascript复制

<l-painter 
  :board="poster" 
  isCanvasToTempFilePath 
  @success="posterSuccess($event)"
  path-type="url" 
/>
 
 posterSuccess(e) {
    console.log('生成图片成功');
    this.posterUrl = e
},

第二种就是通过调用内部方法生成图片

代码语言：javascript复制

<l-painter ref="painter">...code</l-painter>


this.$refs.painter.canvasToTempFilePathSync({
  fileType: "jpg",
  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
  pathType: 'url',
  quality: 1,
  success: (res) => {
    console.log(res.tempFilePath);
    // 非H5 保存到相册
    // H5 提示用户长按图另存
    uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function () {
            console.log('save success');
        }
    });
  },
});

图片填充模式

做分享海报时经常会向海报里添加相关的图片，所以怎么让图片不变形，不被切割压缩，就尤为重要

lime-painter有个图片填充模式，就替我们考虑了这个问题

图片填充模式：object-fit

名称	含义
contain	保持宽高缩放图片，使图片的长边能完全显示出来
cover	保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill	拉伸图片，使图片填满元素
none	保持图片原有尺寸

lime-painter不仅非常容易上手，还有许多厉害的功能，如果有海报需求的小伙伴，不妨一试哦~

css 插件开发数据压缩

0 人点赞