小程序文件上传返回 json_json2canvas：使用JSON生成小程序海报

摘要： 简单实用的开源工具。

作者：诗人的咸鱼
原文：小程序生成分享海报，一个json就够了。同时支持web

Fundebug经授权转载，版权归原作者所有。

需求

在项目里写过几个canvas生成分享海报页面后,觉得这是个重复且冗余的工作.于是就想有没有能通过类似json直接生成海报的库.

然后就在github找到到两个项目:

wxa-plugin-canvas,不太喜欢配置文件的写法.就没多去了解
mp_canvas_drawer,使用方式就比较符合直觉,不过可惜功能有点少.

然后就想着能不能自己再造个轮子.于是就有了这个项目 json2canvas,你可以简单的理解为是mp_canvas_drawer的增强版吧.

json2canvas canvas绘制海报,写个json就够了.

项目的canvas绘制是基于cax实现的.所以天然的带来一个好处,json2canvas同时支持小程序和web

功能

支持缩放. 如果设计稿是750,而画布只有375时.你不需要任何换算,只需要将scale设置为0.5即可.
支持文本(长文本自动换行,感谢 coolzjy@v2ex 提供的正则 https://regexr.com/4f12l ,优化了换行的计算方式(不会粗暴的折断单词))
支持图片(圆角)
支持圆型,矩形,矩形圆角
支持分组(cax里很好用的一个功能)
同时支持小程序和web

示例

web-demo 界面左边的json,可以进行编辑,直接看效果哟~

小程序-demo

git clone https://github.com/willnewii/json2canvas.git
微信开发者工具导入项目 example/weapp/

小程序安装

npm i json2canvas
微信开发者工具->工具->构建npm

在需要使用的界面引入Component

效果图

想要生成一个这样的海报,需要怎么做？(红框是图片元素,蓝框是文字元素,其余的是一张背景图。)

一个json就搞定.具体支持的元素和参数,请查看项目readme

问题反馈

有什么问题可以直接提issue

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用！

小程序文件上传返回 json_json2canvas：使用JSON生成小程序海报相关推荐

微信小程序文件上传前后端
搭建小程序端用vant组件 <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead ...
[C# 网络编程系列]专题十一：实现一个基于FTP协议的程序——文件上传下载器...
引言: 在这个专题将为大家揭开下FTP这个协议的面纱,其实学习知识和生活中的例子都是很相通的,就拿这个专题来说,要了解FTP协议然后根据FTP协议实现一个文件下载器,就和和追MM是差不多的过程的,相信 ...
Java MinIO文件上传返回访问路径及访问配置
1. MinIO形式文件上传: 首先需要有MinIO服务器,这里略过. @PostMapping("file/upload")public String MinIOUpload(M ...
文件上传到ftp服务器大小变小,ftp服务器文件上传大小设置
ftp服务器文件上传大小设置内容精选换一换文件选择上传控件,用于上传文件. Windows场景中,当把源端服务器迁移到华为云后,目的端服务器C盘的已用空间比对应源端服务器C盘的已用空间大至少1G ...
SpringMVC中的文件上传与下载，json转换，及三大框架的整合
文章目录文件上传准备一个文件上传的表单导入文件上传需要的jar包配置文件上传解析器编写文件上传的Controller控制器中的代码: 使用ResponseEntity返回值处理文件下载使用 ...
微信小程序文件上传file
微信小程序上传文件: wx.uploadFile({ //上传 name: 'file', php后台接收: move_uploaded_file($_FILES['file'][ ...
Django，Ajax，文件上传，ajax发送json数据，基于Ajax的文件上传
JSON JSON指的是JavaScript对象方法(JavaScript Object Notation) JSON是轻量级的文本数据交换格式 JSON独立于语言 JSON具有自我i描述,更易理解 ...
上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...
腾讯云对象存储的完整教程，java将文件上传到腾讯云上后返回可以访问的连接
先前使用的是七牛云,是挺好用的,但是七牛对于测试域名有一个月的时间限制.测试域名失效后上传的图片等文件就不能访问了.但是腾讯云每个注册的账户有50G的对象存储的空间.而且没有时间限制.所以就采用腾讯的 ...