

这是一款类三国杀人物卡牌生成器。和使用 Photoshop 制作相比,有这些优点:
去年夏天参加了多次太阁社区的程序员线下活动,认识很多很棒的小伙伴。那时便有了用大家头像制作一副三国杀以作纪念的想法。可惜自己画图太差, Photoshop 也不熟,只好暂时把想法放一边。
后来通过一个开源项目,偶然习得了使用PhantomJS输出网页图片的方法,灵光一闪,觉得可以制作一款基于 HMTL+CSS+Node.js+PhantomJS 的卡牌制作器。经过一周折腾,便有了这个项目。(例子)
在./data/中放入 zhangsanfeng.json 和 zhangsanfeng.jpg 。其中 JSON 文件的内容如下:
{ "id": "zhangsanfeng", "clan": "武当", "blood_number": "4", "nickname": "一代宗师", "name": "张三丰", "skills_group": [ { "title": "突袭", "description": "摸牌阶段,可以放弃摸牌,然后从至多两名(至少一名)角色的手牌里各抽取一张牌。" }, { "title": "铁骑", "description": "当使用 [杀] 指定一名角色为目标后,可以进行判定,若结果为红色,此 [杀] 不可被闪避。" } ] } 网上有很多扑克牌制作网站,我就不给他们打广告了,大家自行搜索就好。
下面秀一下这个项目的成果!!要不要给你们的团队也来一副?

1 shoaly 2017 年 3 月 9 日 赞一个, 想法真不错 对应企业文化 也可以植入. 自己的相册也不是不可以 |
2 shoaly 2017 年 3 月 9 日 很早之前类似的 胸牌, 我用的是 indesign sdk....批量导出 200 多个吧.... 没想到扑克牌也是一个优良的载体 |
5 50vip 2017 年 3 月 9 日 顶~ |
6 50vip 2017 年 3 月 9 日 原理难道是使用 html 模版,然后用 PhantomJS 把 html 弄成图片? 那为啥不使用一些图片处理的模块来直接生成图片? |
7 mahone3297 2017 年 3 月 9 日 @50vip 问的好,同问 |
8 Hansah 2017 年 3 月 9 日 via iPhone 这个必须 star ! |
10 CosmoX OP @50vip 一开始选用这个 stack 纯属巧合,当时在给一个叫做[node-html-pdf]( https://github.com/marcbachmann/node-html-pdf)的模块发 PR ,碰巧对方用到这个技术。 后来发现,用 HTML+CSS 有个好处就是 data 和 view 分离,可以通过切换不同 template 来换主题,而且可以通过 zoom 来调节大小和 resolution 。其实还有个好处就是我可以使用很多现成的模块,不需要自己画~ |
11 CosmoX OP @siknet 我已经把 phantomjs-prebuilt 列为 dependency ,应该不需要另外安装吧:)跑 npm install 时候会自己安装上。 |
12 Jackeriss 2017 年 3 月 10 日 页脚链接挂了 |
13 CosmoX OP |
14 WildCat 2017 年 3 月 10 日 via iPhone 用不着 phantom 的, canvas 直接能把 HTML 保存为图片 |
16 Jackeriss 2017 年 3 月 10 日 @CosmoX 不是, http://hackjutsu.com/HeroCardGenerator/ 这个页面最下面 footer 里跳回 Github 的地址错了。 |
17 CosmoX OP @Jackeriss 哦哦 明白了。我之前有个项目专门给太阁程序员社区做了一款《太阁杀》,这是当时的 demo 。因为原来 repo 的 commit 历史里包含了不少人的个人信息,所以我把它设为 private 。然后把里面个人信息删除后重新建立了这个新 repo 。那个 demo 页面是原来 repo 的,转跳地址也指向原来 repo ,因为设为 private 了,所以看不到。 新 repo : https://github.com/hackjutsu/HeroCards |
19 WildCat 2017 年 3 月 10 日 via iPhone 对啊 所以挂到静态网页都可以做在线版: t/337100#reply9 |