基于node-canvas和 Express是一个图片格式转换工具，完善后会发布为npm。由于本项目目前是Version@0.0.1，所以还有很多不足之处。希望大家指正，互相鼓励。这是我这几天学习Node的时候想做的一个工具。我为什么要这样做？原因有3个：1.前端虽然可以使用Canvas进行操作，但是毕竟功能有限，而且，在国内环境下，如果这个功能在前端充分开发的话，会极其对于兼容低版本的浏览器来说很痛苦，所以想法是直接在后端处理图像以避免兼容性问题。2、Node强大的异步IO机制，可以轻松操作大文件，不用担心页面阻塞。Ajax直接发送请求，等待后台处理响应，然后直接接收图片。而几年前，大牛开发了一个基于C++的node-canvas模块，一直维护的很好，也为后端使用Canvas进行功能开发提供了可能，同时也降低了图像处理的难度。3.大大降低了这个需求的前端使用难度。理解README后，只需要使用Ajax发送相应的参数即可。node-canvas的使用就不用研究了。4.node-canvas的使用经验已经搜索过了，只有少数介绍使用，需要结合这个工具做一个完美的扩展，这样就可以直接使用了，绕过node的不方便的坑-画布安装。Github地址的主题是准大三狗（虽然资质平平，但是我一开始仔细阅读了node-canvas的README后写的），这个项目要长期维护到功能已经全部完成，有兴趣使用的欢迎指正关注，因为一直在摸索前行，希望有志同道合的小伙伴一起前行。如果你有坐标，你可能很久以前就见过它。老规矩：欢迎Star（看不起我脸，跑了）项目Github地址$https://github.com/ZJH9Rondo/...node-canvas项目地址$https://github.com/Automattic...Install在执行npminstall之前，先安装依赖。由于node-canvas是用C++编写的，而且涉及到直接在后台Node中设置css，所以现在的OS不仅需要能够配置node-canvas项目。文件是编译好的，工作过程中还需要操作Canvas实例的依赖，所以在安装过程中可能会遇到或多或少的问题。下面是操作过程（结合node-canvas的README和写代码遇到的问题）根据当前OS，在Install前在终端执行response命令，安装相应的包或依赖。后续操作必须成功后才能进行后续操作，否则安装后项目将无法正常运行。OSCommandOSXbrew安装pkg-configcairopangolibpngjpeggiflibUbuntusudoapt-get安装libcairo2-devlibjpeg8-devlibpango1.0-devlibgif-devbuild-essentialg++Fedorasudoyum安装cairocairo-develcairomm-devellibjpeg-turbo-develpangopango-develpangommpangomm-develgiflib-develSolarispkgininstallcairopangopkg-configxprotorenderprotokbprotoxextprotoWindows我们wiki上的说明执行以上操作成功后，就可以安装项目并获取源码包了：$gitclonegit@github.com:ZJH9Rondo/img-trans.git安装Package.json对应的依赖：$sudonpminstall提示：如果当前用户更新 npm 到@5.0版本，执行 sudonpminstall会在当前并行生成目录package-lock.json文件，这是新版npm新增的特性（规范），不影响正常使用。具体规范说明，如有需要请参考以下来自Stackoverflow的解释。如何使用前端使用ajax发送数据，后端收到后处理相应的图片，然后将response作为转换后图片的url返回。上面的基本描述有一点需要说明一下。当前基础版不添加上传文件进行转换。需求、开发理念基本使用场景是 个人网站或图片格式转换功能开发，目前站点对图片格式转换的功能需求比较简单，所以直接通过url读取站点的图片文件进行转换操作，后续会添加文件上传处理。Ajax参数说明PNGSVGJPEG参数说明（使用 以PNG 为例）：由于测试是使用本地打包的Ajax包进行测试，所以格式可能有点不同vardata={"source":src,//待转换图片的"名称"："test.png"//生成图片的文件名"width":794,//Canvas的宽度"height":1123,//Canvas的高度"outUrl":"./image/newImg/",//生成的转换文件存放路径"type":"png" //文件转换格式};其中src建议使用相对路径，它的值可以自由获取，也可以通过js获取，但是在获取getAttribute()获取的时候建议使用，不要使用 img.src。PDF的问题需要仔细说明一下，如下：示例图片是在本地生成标准A4纸大小的PDF图片，截取上半部分作为示例PDF转换，有POST发送请求数据，需要使用body-parser来处理url，在package.jsonvardata={"source":src,"width":794,"height":1123,"h1":"ThisisaPDF","p":"Itbemadenode-canvas,已经写在bemadenode-canvas,Itbemadenode-canvas,Itbemadenode-canvas","name":"test.pdf","outUrl":"./image/newImg/","type":"pdf"};PDF参数说明h1:当前PDF的内容标题设置p:当前PDF的文本内容文本，但是目前，由于p函数的解析node-canvas的，太长的文字没有自动换行，当前版本的后续更新都会通过js在后台处理这个。其余同上，目前开发只返回Url，所以具体生成除PDF以外的文件，测试时可直接使用查看效果，后续开发功能会及时更新补充。目前用于图片格式转换没有问题。Ajax请求发送PDF必须使用 POST发送数据，启动Ajax前需要对数据进行处理，使用JSON.stringify()进行处理，将RequestHeaders中的Content-Type设置为 application/json，以便后端接收解析请求通常是Url携带的数据。index.html是我简单的本地测试文件。初始函数很简单。稍后将使用测试脚本来测试覆盖率。将开发后续功能。PDF文本长文本裁剪转换PDF返回文件支持下载PDF多文本转换Canvas转换清晰度下降的问题近期会把做这件事涉及到的一些知识点总结一下（主要是Node和HTTP以及 Git的问题处理与协同开发，这部分需求因人而异，有需要的可以关注，互相学习。）
