原创 | 侠女一枝
前沿：
你参加了某个微信社群吗？各种读书营、写作班层出不穷，400-500人的大群，社群管理是很大的任务。比如入群需要 每个人定制化“录取通知书”、“喜报”，毕业结营需要“毕业证书”、“优秀勋章”等等。社群设计组 需要出一套原创模板，然后安排4-7个设计小助手，PPT分工重复替换头像和昵称。
21世界最宝贵的是什么？是时间。
我经历了剽悍读书营 “精读营” 四五百张勋章制作的“折磨”之后，痛定思痛，发挥码农的精神，写了一套NodeJS 脚本，只需要一次配置勋章模板数据参数，运行代码即可自动生成几百张图片。
一、踩过的坑o(╥﹏╥)o
1）方法A： PPT自带的VBA脚本 宏
auto1-ppt.png
mac版PPT：苹果系统PPT禁止脚本读取系统文件。
与支持 VBA 的其他版本的 Office 应用程序不同，Office 2016 for Mac 应用程序是沙盒类型的应用程序。
沙盒限制应用程序访问应用程序容器之外的资源。这会影响与跨进程文件访问或通信有关的任何外接程序或宏。可以新命令 GrantAccessToMultipleFiles（），尽可能地降低沙盒处理的影响。但是：
Boolean GrantAccessToMultipleFiles(fileArray)
fileArray POSIX 文件路径的数组
缺点：需要精确的文件路径，自动遍历不行
Windows版PPT：不自动录制宏，不记录打开批量文件的步骤，只能单文件合成，而且对象不能自动精确控制，特别是替换头像，生成新头像，鼠标操作是右键替换图片，js 代码其实是分五步，删除旧对象，新建对象，导入图片，剪裁成原型，原型位置定位。
结果：卒。
还有一个原因，VB这种老古董语言真的编程太不友好了
2）方法B：html + js 单网页canvas 合成图片
环境： 一台电脑 + 浏览器 + 一段js 代码
结果：可以生成单张喜报，但无法按次序自动生成几百张，浏览器不具有自动读取系统文件路径的权限。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas 批量合成Image</title>
<style>
#containter{
width:720px;
height:1234px;
}
</style>
</head>
<body>
<canvas id="containter" width="720" height="1234">
not support canvas
</canvas>
<script src="js/render.js"></script>
</body>
</html>
// html 代码，js部分后边统一讲
结果：思路可行，但批量卒。
3）方法C：Photoshop批量
PS批量动作，但执行费点时间，200张需要运行30分钟。
PS脚本个人感觉就是一把金庸武侠里的屠龙刀，用得好方可号令群雄，用不好电脑卡顿，GAME OVER。
结果：可行，但执行耗时久。适合少量
如下，为你介绍轻灵的倚天剑，Node JS。
二、为什么选NodeJS ?
前置知识：
(1) js 是啥东东？JavaScript 是啥？
js 英文单词科普200词(扇贝) [ 作者： steerpdog ] https://www.shanbay.com/wordlist/169468/450187/
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
(2) node js
简单的说 Node.js 就是运行在服务端的 JavaScript。
官网http://nodejs.cn/
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
(3) npm
Node.js 的包管理器 npm，是全球最大的开源库生态系统。
(4) canvas （HTML5新增标签）
英文直译： 画布。
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。
Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
侠女说： canvas代码操作中，画线、画圆、画字、图层叠加、像素单位px的等等概念和PS软件中的同名原理是共通的。代码绘制图形就好像是无形中一个人在机械得点按钮。
综上各种知识点说明
- js 是每个浏览器通用的脚本，编程简便，新手入门浅，深入广阔
- npm 有各种开源的图形库，下载即可用
- 基于2，有了nodejs的canvas库，方法B中合成单图片的代码，迭代改成多图异步就可以批量生产几百张不同人的喜报。
结果：可行，执行耗时极短，200张 2分钟以内完成。但安装环境步骤严谨，一次全局安装，以后永久使用。
三、安装环境
说明
（1）node 有很多优秀的开源图形库，比如强大而复杂的gm。gm是nodejs对GraphicsMagick和ImageMagick封装。GraphicsMagick和ImageMagick是老牌的图片处理工具，它们功能很强大，包括了图片的创建、编辑、合成、读取、转换、切割、颜色替换等各种图片处理功能。功能的强大就可能意味着安装和使用的复杂！
（2） 沿用前边的代码，所以采用 nodecanvas 2.0
GitHub node-canvas https://github.com/Automattic/node-canvas
分为如下几个步骤：
- 安装图形库
你可以快速 用命令行安装
| 系统OS | 命令行Command |
|---|---|
| OS X | Using Homebrew:brew install pkg-config cairo pango libpng jpeg giflibUsing MacPorts: port install pkgconfig cairo pango libpng jpeg giflib
|
| Ubuntu | sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++ |
| Fedora | sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel |
| Solaris | pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto |
| Windows | Instructions on our wiki |
Homebrew OSX 系统需要先用内置的Terminal ， 执行一段ruby语句安装
Install Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 安装node 环境 https://nodejs.org/en/download/
- npm 安装nodecanvas库
新建一个文件夹，运行npm init ,然后一路enter，然后 运行
$ npm install canvas@next
成功如下：
四、代码实例
autoExport
- avators/ 头像集合
- dist/ 导出图片
- font/ 字体
- js/ 脚本
- model/ 模板背景
- resource/ 额外资源
- index.html 静态js canvas 案例demo
- node_modules 库
- package-lock.json
- package.json 配置文件
- ReadMe.md 说明文档
程序流程分为以下几个部分
graph TB
A((配置参数))-->运行脚本nodeXXX;
运行脚本nodeXXX-->B{是否报错};
B{是否报错}-->|否|程序自动开始执行;
B{是否报错}-->|是|C(重新设置参数再运行脚本);
程序自动开始执行-->读取文件流;
读取文件流-->绘制模板背景图;
绘制模板背景图-->绘制昵称-姓名过滤;
绘制昵称-姓名过滤-->绘制原型头像;
绘制原型头像-->导出图片;
代码解析
源码地址
(1)配置参数
(2)读取文件流
(3)绘制模板背景图
(4)绘制昵称
- 1 符号过滤
- 2 特殊昵称保留
(5)绘制原型头像
(6)导出图片
五、如何套模型运用
步骤一：
$ npm install //安装库
步骤二：
只需要打开PSD，或者用标注软件测量距离即可，计算修改配置参数若干。
特别注意头像地址路径、字体地址路径、导图文件路径的配置
步骤三：运行
$ node js/xb // 执行程序
可以先用一张头像测试参数位置，测试通过后，再把执行所有头像。
六、容易出错的点
【1】中文乱码，书法字体不识别 ，如何筛选？
【2】昵称包含特殊数字、昵称过长，如何自动适配？
【3】模板头像原稿就不是绝对居中的，如何微调参数？
七、if你真学不会
综上所述，朋友，如果你还看不懂，或者你电脑是WinXP ，Win7不完全版本、NPM 下载不成功..... 各种BUG 不赘述。
if真(打*斯?)都学不会！
then私聊加我QQ，把头像集合+模板源文件给我，我帮你跑代码。
但是，要相信你自己，勇敢的学一下吧~
要求：
（1）头像统一命名规范，"昵称.jpg " or “学号-昵称.jpg ”,不要出现 "昵称-地区-职业" 这种多余的中文字。昵称中有数字和特殊符号的需要写.txt说明，不然一律当手误过滤， 比如 — - + ~*
（2）模板源文件最好PSD，便于识别特殊书法字体
（3）期望数量大于100张，谢谢_
我觉得一千一万的批量制作才能展示生产力。
代码改变世界 ，为自己增加竞争力。
八、其他高级运用
（1）排除法筛选全勤的名单生成勋章
（2）对比法读取优秀名单
（3）附加从Excel里读取10天数据生成打卡数据图 （坐标组，平面，倾斜）
【图一】 不倾斜的画布
【图二】 倾斜的画布
友情提示：图很好看，对坐标点的时候需要擦亮眼睛，一次次用同一张图测试位置。
（4）做成桌面可视化按钮点击的程序？
已卒…… 不同系统安装库不同、而且库非常大
图片设计 - 笙笙
所属社群 - 2018剽悍读书营2连
网友评论