内容简介：摘要：简单实用的开源工具。Fundebug经授权转载，版权归原作者所有。在项目里写过几个canvas生成分享海报页面后,觉得这是个重复且冗余的工作.于是就想有没有能通过类似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
{
"usingComponents": {
"json2canvas":"/miniprogram_npm/json2canvas/index"
}
}
效果图
想要生成一个这样的海报,需要怎么做？(红框是图片元素,蓝框是文字元素,其余的是一张背景图。)
一个json就搞定.具体支持的元素和参数,请查看项目 readme
{
"width": 750,
"height": 1334,
"scale": 0.5,
"children": [
{
"type": "image",
"url": "http://res.mayday5.me/wxapp/wxavatar/tmp/bg_concerts_1.jpg",
"width": 750,
"height": 1334
}, {
"type": "image",
"url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg",
"width": 100,
"x": 48,
"y": 44,
"isCircular": true,
}, {
"type": "circle",
"r": 50,
"lineWidth": 5,
"strokeStyle": "#CCCCCC",
"x": 48,
"y": 44,
}, {
"type": "text",
"text": "歌词本",
"font": "30px Arial",
"color": "#FFFFFF",
"x": 168,
"y": 75,
"shadow": {
"color": "#000",
"offsetX": 2,
"offsetY": 2,
"blur": 2
}
}, {
"type": "image",
"url": "http://res.mayday5.me/wxapp/wxavatar/tmp/medal_concerts_1.png",
"width": 300,
"x": "center",
"y": 361
}, {
"type": "text",
"text": "一生活一场 五月天",
"font": "38px Arial",
"color": "#FFFFFF",
"x": "center",
"y": 838,
"shadow": {
"color": "#000",
"offsetX": 2,
"offsetY": 2,
"blur": 2
}
}, {
"type": "text",
"text": "北京6场，郑州2场，登船，上班，听到你想听的歌了吗？",
"font": "24px Arial",
"color": "#FFFFFF",
"x": "center",
"y": 888,
"shadow": {
"color": "#000",
"offsetX": 2,
"offsetY": 2,
"blur": 2
}
}, {
"type": "rect",
"width": 750,
"height": 193,
"fillStyle": "#FFFFFF",
"x": 0,
"y": "bottom"
}, {
"type": "image",
"url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg",
"width": 117,
"height": 117,
"x": 47,
"y": 1180
}, {
"type": "text",
"text": "长按识别小程序二维码",
"font": "26px Arial",
"color": "#858687",
"x": 192,
"y": 1202
}, {
"type": "text",
"text": "加入五月天 永远不会太迟",
"font": "18px Arial",
"color": "#A4A5A6",
"x": 192,
"y": 1249
}]
}
问题反馈
有什么问题可以直接 提issue
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和 Java 线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Java JDK6学习笔记
林信良 / 清华大学出版社 / 2007-4 / 59.90元
《Java JDK6学习笔记》是作者良葛格本人近几年来学习Java的心得笔记，结构按照作者的学习脉络依次展开，从什么是Java、如何配置Java开发环境、基本的Java语法到程序流程控制、管理类文件、异常处理、枚举类型、泛型、J2SE中标准的API等均进行了详细介绍。本书还安排了一个“文字编辑器”的专题制作。此外，Java SE6的新功能，对Java lang等套件的功能加强，以及JDBC4.0、......一起来看看 《Java JDK6学习笔记》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
Markdown 在线编辑器
Markdown 在线编辑器