在项目里写过几个canvas生成分享海报页面后,觉得这是个重复且冗余的工作.于是就想有没有能通过类似json直接生成海报的库.
然后就在github找到到两个项目:
然后就想着能不能自己再造个轮子.于是就有了这个项目 json2canvas,你可以简单的理解为是mp_canvas_drawer的增强版吧.
项目的canvas绘制是基于cax实现的.所以天然的带来一个好处,json2canvas同时支持小程序和web
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
}]
}
深蓝互联成立于2013年,是一家物联网硬件开发及软件应用服务商,获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年,擅长SaaS 平台开发、APP小程序开发、软硬件结合开发,在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。
我们拥有专业优秀的设计和技术团队,以极具创意的 UI 设计、精湛卓越的开发技术,专业的网络策划团队。公司多年来投入打造物联网SaaS平台,集成了公司研发的多款智能物联网终端(智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等)。
公司一直坚持以研发为导向,打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务!
文章来自深蓝互联http://www.szdbi.com/webxt/273.html转载请注明出处!