基于 node-canvas 和 express 的一款图片格式转换工具

[ZJH9Rondo]

基于 node-canvas 和　 express 的一款图片格式转换工具,完善后会发布成 npm

原文

• 由于本项目当前是 [email protected]，还有很多不足支出，希望大家能指正，共勉。

  这是我最近几天在学 Node 的时候想着做的一个工具，为什么做这个?

原因有三点：

• 1.虽然前端可以使用 Canvas 进行操作，但是毕竟功能有限，并且，国内的环境，如果这个功能在前端完全开发，那么对于兼容低版本的浏览器将是痛苦不堪，所以构想直接在后端对图片进行处理，进而避免兼容性等问题。

• ２.Node 强大的异步 IO 机制使得对大文件操作也不会怕页面阻塞，直接由 Ajax 发送请求，等待后台处理完响应后直接接收图片即可，并且几年前也有大牛开发出基于 C++的 node-canvas 的模块，并且一直也有很好的维护，也为在后端使用 Canvas 进行功能开发提供了可能，也降低了图片处理方面的难度。

• ３.极大降低前端对此需求的使用难度，只需对照 READEME 理解后，使用 Ajax 发送相应参数即可，无需去研究 node-canvas 的使用.

• 4.node-canvas 的使用经验搜索过，只有少量使用介绍，有必要结合此工具做完善拓展，使其能够直接使用，绕过 node-canvas 这个安装也不方便的坑。

Github Address

题主是一枚准大三狗(虽然资质平平，但是初期写这个还是仔细看了 node-canvas 的 READEME 的才写的)，此项目准备长期维护，直至功能完全完善，有兴趣使用的欢迎指正的关注，因为也是一直在摸索着前进，希望有志同道合的伙伴一起前进，坐标的话，估计你早就看见了。 老规矩: 欢迎 Star(小编原谅我的表脸，逃)

• 项目 Github 地址 $ https://github.com/ZJH9Rondo/Img-trans

• node-canvas 项目地址 $ https://github.com/Automattic/node-canvas

Install

执行 npm install 前，先安装依赖，由于 node-canvas 是 C++写的，并且，其中涉及到在后端 Node 中直接对 css 等进行设置，所以不仅需要当前的 OS 可以对 node-canvas 的项目文件进行编译，还需要工作期间操作 Canvas 实例的依赖，所以安装期间可能会或多或少的遇到问题，以下是操作流程(结合了 node-canvas 的 READEME 和编写代码期间遇到的问题)

• 根据当前的 OS 在 Install 前在终端执行响应命令,安装对应包或依赖,必须成功后才可执行后续操作，否则安装后项目也无法正常运行。

• 执行上述操作成功之后即可安装项目,由于表格格式不支持，在此没有添加，详情见原文

获取源码包:

$ git 　 clone [email protected]:ZJH9Rondo/Img-trans.git

安装 Package.json 对应依赖:

$ sudo npm install

提醒一点: 如果当前用户是将　 npm 　更新至＠５.0 版本，执行　 sudo npm install 会在当前平行目录生成　 Package-lock.json 文件，这个是 npm 新版本加入的特征(规范),不影响正常使用，具体规范说明有需要可以看如下来自Stackoverflow的解释。

How to use

• 前端用 ajax 发送数据，后端接收后对对应图片进行处理，之后响应返回为一个转换后图片的 url

上述基本说明有一点有必要说明，当前的基础版本暂时没有加入上传文件进行转换的需求，开发构想基本使用场景是　个人网站或图片格式转换功能开发中,当前站点的对图片格式转换的简单功能需求，所以直接是通过 url 读取站点的图片文件进行转换操作，后续会加入文件上传处理。

• Ajax 的参数说明

PNG SVG JPEG 的参数说明(以　 PNG 　为例):

由于测试是用本地自己封装的一个 Ajax 测试的，所以格式可能会有点差别

var data = {

"source": src,      // 需转换图片的

"name": "test.png"  // 生成图片的文件名

"width": 794,      // Canvas 的 width

"height": 1123,    // Canvas 的 height

"outUrl": "./image/newImg/",  // 生成转换文件的存放路径

"type": "png"    　// 文件转换格式

};

其中, src 建议使用相对路径,其值的获取可以自由输入,也可以通过 js 获取,但是在获取的时候建议使用　 getAttribute() 获取,而非　 img.src 。

PDF 的问题需要仔细说明,如下:

• 示例图为本地生成一标准 A4 纸大小的 PDF 图片，截取了上半部作为示例

• PDF 转换存在 POST 发送请求数据,需要使用 body-parser 处理 url,在 package.json 中已写入

var data = {

"source": src,

"width": 794,

"height": 1123,

"h1": "This is a PDF",

"p": "It be made node-canvas,It be made node-canvas,It be made node-canvas,It be made node-canvas",

"name": "test.pdf",

"outUrl": "./image/newImg/",

"type": "pdf"

};

• PDF 参数说明

h1: 当前 PDF 的内容标题设置

p: 当前 PDF 的文本内容文本,但是当前由于 node-canvas 的 p 函数解析对于过长的文本没有自动换行的处理，当前版本的后续更新会对此在后台通

过 js 做处理。

其余与上相同，又去当前开发的只是返回了 Url,所以具体生成的文件除 PDF 外都能在测试时直接使用返回的 URL 看到效果,后续的开发功能会及时更新添加，目前使用对于图片格式转换没有问题。

• PDF 中 Ajax 请求发送必须使用　 POST 发送数据,并且在启动 Ajax 之前需要对 data 做处理，使用 JSON.stringify() 做处理,并且设置 Request Headers 中的 Content-Type 为　 application/json ,这样后端才能正常接收并解析请求中 Url 所携带的数据。

• index.html 为我在本地的简单测试文件，初期功能简单，后续会使用测试脚本测试覆盖率

后续功能开发

• PDF 的 text 长文本裁剪转换

• PDF 返回文件支持下载

• PDF 多文本转换

• Canvas 转换后清晰度下降问题

近期会写几篇做这个东西所涉及的一些知识点总结(主要是关于 Node 和 HTTP 以及　 Git 的问题处理以及协同开发,此部分需求因人而异，有需要的可以关注，互相学习)