uni-app生成海报并分享

lime-painter是一款canvas海报组件，可以更轻松的生成海报

海报画板 - DCloud 插件市场 一款canvas海报组件，更优雅的海报生成方案https://ext.dcloud.net.cn/plugin?id=2389插件提供 JSON 及 Template 的方式绘制海报

1、Template方式

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

<l-painter>
//如果使用Template出现顺序错乱，可使用`template` 等所有变量完成再显示
<template v-if="show"><l-painter-viewcss="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"></l-painter-view><l-painter-texttext="登鹳雀楼\\n白日依山尽，黄河入海流\\n欲穷千里目，更上一层楼"css="text-align:center; padding-top: 20rpx; text-decoration: line-through "/><l-painter-imagesrc="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"css="width: 200rpx; height: 200rpx"/><l-painter-qrcodetext="limeui.qcoon.cn"css="width: 200rpx; height: 200rpx"/>
<template>
</l-painter>

2、JSON方式

• 在 json 里四种类型组件的type为view、text、image、qrcode
• 通过 board 设置海报所需的 JSON 数据进行绘制或ref获取组件实例调用组件内的render(json)
• 所有类型的 schema 都具有css字段，css 的 key 值使用驼峰如：lineHeight

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

data() {return {poster: {css: {// 根节点若无尺寸，自动获取父级节点width: '750rpx'},views: [{type: "view",css: {background: "#07c160",height: "120rpx",width: "120rpx",display: "inline-block"}},{type: 'text',text: '登鹳雀楼\\n白日依山尽，黄河入海流\\n欲穷千里目，更上一层楼',css: {// 设置居中对齐textAlign: 'center',// 设置中划线textDecoration: 'line-through'}},{type: 'image',src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',css: {width: '200rpx',height: '200rpx'}},{type: 'qrcode',text: 'limeui.qcoon.cn',css: {width: '200rpx',height: '200rpx',}}]}}
}

View 容器

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

Text 文本

• 通过 text 属性填写文本内容。
• 支持\\n换行符
• 支持省略号，使用 css 的line-clamp设置行数，当文字内容超过会显示省略号。
• 支持text-decoration

Image 图片

• 通过 src 属性填写图片路径。
• 图片路径支持：网络图片，本地 static 里的图片路径，缓存路径，字节的static目录是写相对路径
• 通过 css 的 object-fit属性可以设置图片的填充方式，可选值见下方 CSS 表格。
• 通过 css 的 object-position配合 object-fit 可以设置图片的对齐方式，类似于background-position，详情见下方 CSS 表格。
• 使用网络图片时：小程序需要去公众平台配置downloadFile域名
• 使用网络图片时：H5 和 Nvue 需要决跨域问题

Qrcode 二维码

• 通过text属性填写需要生成二维码的文本。
• 通过 css 里的 color 可设置生成码点的颜色。
• 通过 css 里的 background可设置背景色。
• 通过 css里的 width、height设置尺寸。

生成图片

1、方式1：

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

<l-painter isCanvasToTempFilePath pathType="url" @success="posterSuccess" hidden :board="poster" />
<image class="poster2" :src="canvasUrl" :show-menu-by-longpress="true" mode="widthFix" v-if="canvasUrl != null">
</image>

<script>export default {data() {return {canvasUrl: '',poster: {}}},methods: {posterSuccess($event) {this.canvasUrl = $eventconsole.log(this.canvasUrl);},}}
</script>

海报绘制完毕后将生成的图片加载到image组件，通过设置show-menu-by-longpress属性，可以在image组件的长按时弹出菜单进行图片分享和识别二维码等操作。

2、方式2：

通过调用内部方法生成图片

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

<script>export default {data() {return {poster: {}}},methods: {saveClick() {console.log('saveClick')// 生成图片this.$refs.painter.canvasToTempFilePathSync({fileType: "jpg",// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为urlpathType: 'url',quality: 0.9,success: (res) => {console.log(res.tempFilePath);// 非H5 保存到相册uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function() {uni.showToast({title: '图片已保存'})},fail:function(){uni.showToast({icon: 'error',title: '图片保存失败'})}});},});},}}
</script>