Nodejs图片编辑和中文乱码

近期证书生成的活动比较流行，如马拉松证书生成活动，运营同学打算做一个大学录取通知书的活动。以前相关的活动都在nodejs服务器上进行开发，这次也就不例外了。

nodejs的图片处理库不少，使用比较多的有以下几个：

1. node-images：在cnode上有node-iamges作者写的文章。这个库安装简单，依赖少；借助它可以实现改变图片大小、图片合并等功能。本打算使用它进行开发，但是由于其不支持文字写入，只好另寻他路了。
2. node canvas：这个库我调研的较少，百度上有不少文章，大家可以自行查看进行判断，其中此文介绍了其在百度地图上的使用，说明其功能还是很强大的。
3. gm: gm是nodejs对GraphicsMagick和ImageMagick封装。GraphicsMagick和ImageMagick是老牌的图片处理工具，它们功能很强大，包括了图片的创建、编辑、合成、读取、转换、切割、颜色替换等各种图片处理功能。 gm基于它俩进行开发，可知gm的功能强大。功能的强大就可能意味着安装和使用的复杂！本文主要介绍gm的安装和使用方法；同时对经常遇到的中文乱码问题进行了介绍。由于开发机器是mac，所以只覆盖到了mac和linux系统。

安装gm

gm在mac上的安装比较简单，依据npm上的介绍进行即可：

  brew install imagemagick
  brew install graphicsmagick

在linux上安装gm，我参考了GraphicsMagick介绍及安装，，服务器是阿里云，主要步骤如下：

• 获取安装包

  wget http://iweb.dl.sourceforge.net/project/graphicsmagick/graphicsmagick/1.3.23/GraphicsMagick-1.3.23.tar.gz

• 解压然后执行configure和make make install

  tar -zvf GraphicsMagick-1.3.23.tar.gz
  cd GraphicsMagick-1.3.23/
  ./configure
  make
  make install

• 执行：convert -v, 看到如下内容，就说明安装成功了：

Paste_Image.png

在工程目录执行： npm install gm
安装完成后，在nodejs中使用gm：

    var fs = require('fs');
    var gm = require('gm');
    gm('./resources/dev/images/help/1_big.jpg')
        .draw('image Over 100, 100 100, 100 "./resources/dev/images/app/actGuide.png"')
        .write('./resources/dev/images/app/aboutus_modify.jpg', function(err) {
              if (!err){  console.log('done');
              }else{console.log(err.message || "出错了！"); } });

执行后，可以看到aboutus_modify.jpg是1_big.jpg和actGuide.png的合成。

1_big.jpg

actGuide.png

aboutus_modify.jpg

需要特别注意gm中函数参数的写法，其函数说明文档地址是：draw函数说明，对比上述例子中写法，希望大家多加注意。

另外：gm的APi文档地址是：gm API文档 ，可以结合GraphicsMagick的文档使用。

中文乱码

gm正常跑起来后，经常会遇到中文乱码问题。在以往GraphicsMagick的使用中，已经有不少关于这方面的总结：

1. how to use imagick annotateImage for chinese text? –php
2. GM中文乱码如何解决？ — node
3. GraphicsMagick中文乱码解决办法 — java
4. 如何用imagemagick在图片上写中文 — cmd
5. 用ImageMagick在图片中写中文的问题及解决 –cmd

上述文章中作者都对中文乱码问题提出了自己的解决方法，在GraphicsMagick的文档和社区中也有对这类问题的解答:

1. ImageMagick v6 Examples
2. how to apply imagemagic to other language?

总结起来解决乱码需满足两个条件：1. 文档utf-8编码； 2. 指定中文字体库。

结合Demo程序进行说明：

var gm = require('gm');
var _name = "China中文";
gm('./resources/dev/images/help/1_big.jpg')
    .draw('image Over 100, 100 100, 100 "./resources/dev/images/app/actGuide.png"')
    .font('/Library/Fonts/微软雅黑.ttf')
    // .font('/usr/share/fonts/微软雅黑.ttf')  /* 服务器上的路径*/
    .draw('text  100, 100 '+_name)
    // .resize(240, 240)
    .write('./resources/dev/images/app/aboutus_modify.jpg', function(err) {
        if (!err){
            console.log('done');
        }else{
            console.log(err.message || "出错了！");
        }
    });

上面程序得到的结果如下，可以看到中文能正常显示，而且字体也是我们指定的微软雅黑：

文字和图片嵌入成功.png

我们来分析下解决乱码的两个条件：

1. 文档utf-8编码：这里utf-8编码是指要求文件的存储编码方式是utf-8，而不是对字符进行utf-8编码（如js中的encodeURI）。通过对IDE或者其他方式确定文件的编码方式，如有问题可自行百度。
2. 指定中文字体库：可以通过 .font('/Library/Fonts/微软雅黑.ttf') //mac系统下 或 .font('/usr/share/fonts/微软雅黑.ttf') //linux系统下指定。 font函数的参数是字体在系统中的存储路径。

Mac电脑的字体存储文件路径是：/Library/Fonts/，如下图所示：

Paste_Image.png

linux下， fc-list: 查询所有安装字体，fc-list :lang=zh:查询安装的中文字体， 字体的安装路径是：/usr/share/fonts。

Paste_Image.png

如果需要安装特定字体，可以到这个网站上下载，然后依据不同平台进行安装：

1. Windows 7 / Vista – 选定文件点击右键选安装
2. Windows XP – 复制和粘贴字体文件到C:\WINDOWS\FONTS
3. Mac OS X – 双击字体文件然后选择安装字体
4. Linux – 复制字体文件到/USR/SHARE/FONTS

总结

文章简要介绍了gm模块的使用以及可能遇到的中文乱码问题，希望对大家有多帮助。