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>

uni-app生成海报并分享相关推荐

uniapp 实现生成海报并分享给微信好友和保存到本地相册
记录uniapp 生成二维码海报并保存到本地或者分享给微信好友 – 文章目录记录uniapp 生成二维码海报并保存到本地或者分享给微信好友前言一.引入生成二维码的组件二.点击右侧的分享图标生成 ...
vue项目之H5 app 生成海报功能
一.需求本次[世纪盛典]活动,分为三期,每期都有海报相关的工作内容. 海报带有动态的个人信息.头像.证书编号及二维码等. 本次活动需要在微信h5.小程序.app里面正常启动. 二.经过网上查找使用 ...
小程序画布Canvas生成海报，分享朋友圈
一使用场景: 小程序内,想要分享海报到朋友圈,附带小程序码,达到转发引流的目的. /*** 用户点击右上角分享*/onShareAppMessage: function() {},shareBook ...
uni App 支付宝小程序分享代码
封装获取当前页面的路由信息 export function getCurrentPath() {let currentRoutes = getCurrentPages(); // 获取当前打开过的页面 ...
推荐一款快速生成海报的微信小插件
现在很多小程序都有生成海报,分享海报的功能.我们自己的几个小程序 (如:爸妈搜商城.爸妈搜云课堂.幼师大学.跟着外教学英语等) 也都有生成海报的功能.因此技术团队萌生出制作一个简单易用的微信小插件,只 ...
uniapp点击生成商品海报、下载海报、分享海报
开发过程中需要根据商品信息生成海报,供用户下载海报 .分享海报等效果: 1.首先搭建页面结构: <view class="share flex& ...
uni-app app端用highcharts绘制图表，并生成海报保存到手机相册
uni-app 打包app后 highcharts图表绘制不成功,不支持该方法,所以就考虑在app中嵌入webview h5页面,实现图表的绘制. 首先引用安装highcharts,封装成一个组件 n ...
微信小程序分享生成海报（自带二维码）+头像+昵称
前言: 我的分享海报是弹框,可根据自己要求写成页面,原理都是一样的,背景图是前期测试的,效果是OK的,真机测试手机也是显示的. 效果图: wxml: <vi ...
uniapp 生成商品海报并分享保存
uniapp 生成商品海报并分享保存 <template><view class="center"><view class="icon-it ...