【运营神器】1分钟制作200张喜报(未完）

原创 | 侠女一枝

前沿：
你参加了某个微信社群吗？各种读书营、写作班层出不穷，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 giflib` Using 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连