基於node-canvas 和 express 的一款圖片格式轉換工具

基於node-canvas 和　express 的一款圖片格式轉換工具,完善後會發布成npm

• 因爲本項目當前是Version@0.0.1，還有不少不足支出，但願你們能指正，共勉。

這是我最近幾天在學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/...

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

Install

執行 npm install 前，先安裝依賴，因爲 node-canvas 是C++寫的，而且，其中涉及到在後端Node中直接對css等進行設置，因此不只須要當前的 OS 能夠對node-canvas的項目文件進行編譯，還須要工做期間操做Canvas實例的依賴，因此安裝期間可能會或多或少的遇到問題，如下是操做流程(結合了node-canvas的READEME和編寫代碼期間遇到的問題)

• 根據當前的OS在Install前在終端執行響應命令,安裝對應包或依賴,必須成功後纔可執行後續操做，不然安裝後項目也沒法正常運行。

OS	Command
OS X	brew install pkg-config cairo pango libpng jpeg giflib
Ubuntu	sudo apt-get install libcairo2-dev libjpeg8-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

• 執行上述操做成功以後便可安裝項目

獲取源碼包:

$ git　clone git@github.com: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的問題處理以及協同開發,此部分需求因人而異，有須要的能夠關注，互相學習)