json2canvas：使用JSON生成小程序海报

港控/mmm° 2021-12-22 04:51 371阅读 0赞

**摘要：** 简单的开源工具。

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

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

### 需求 ###

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

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

*  [wxa-plugin-canvas][],不太喜欢配置文件的写法.就没多去了解
 *  [mp\_canvas\_drawer][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][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"
      }
    }

### 效果图 ###

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

![2019-06-29-01.jpeg][]

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

{ 
            "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][issue]

[Link 1]: https://segmentfault.com/a/1190000019507684
[Fundebug]: https://www.fundebug.com/
[wxa-plugin-canvas]: https://github.com/jasondu/wxa-plugin-canvas
[mp_canvas_drawer]: https://github.com/kuckboy1994/mp_canvas_drawer
[json2canvas]: https://github.com/willnewii/json2canvas
[cax]: https://github.com/dntzhang/cax
[https_regexr.com_4f12l]: https://regexr.com/4f12l
[web-demo]: http://blog.mayday5.me/json2canvas/example/web/index.html
[2019-06-29-01.jpeg]: /images/20211220/54659299b58a41f4a51e9301aefe01fc.png
[issue]: https://github.com/willnewii/json2canvas/issues/new