摘要：基于和的一款圖片格式轉換工具完善后會發布成由于本項目當前是，還有很多不足支出，希望大家能指正，共勉。中請求發送必須使用發送數據并且在啟動之前需要對做處理，使用做處理并且設置中的為這樣后端才能正常接收并解析請求中所攜帶的數據。

由于本項目當前是Version@0.0.1，還有很多不足支出，希望大家能指正，共勉。

這是我最近幾天在學Node的時候想著做的一個工具，為什么做這個?
原因有三點：

1.雖然前端可以使用 Canvas 進行操作，但是畢竟功能有限，并且，國內的環境，如果這個功能在前端完全開發，那么對于兼容低版本的瀏覽器將是痛苦不堪，所以構想直接在后端對圖片進行處理，進而避免兼容性等問題。

２.Node強大的異步IO機制使得對大文件操作也不會怕頁面阻塞，直接由Ajax發送請求，等待后臺處理完響應后直接接收圖片即可，并且幾年前也有大牛開發出基于C++的node-canvas的模塊，并且一直也有很好的維護，也為在后端使用Canvas進行功能開發提供了可能，也降低了圖片處理方面的難度。

３.極大降低前端對此需求的使用難度，只需對照READEME理解后，使用Ajax發送相應參數即可，無需去研究node-canvas的使用.

4.node-canvas的使用經驗搜索過，只有少量使用介紹，有必要結合此工具做完善拓展，使其能夠直接使用，繞過node-canvas這個安裝也不方便的坑。

題主是一枚準大三狗(雖然資質平平，但是初期寫這個還是仔細看了node-canvas的READEME的才寫的)，此項目準備長期維護，直至功能完全完善，有興趣使用的歡迎指正的關注，因為也是一直在摸索著前進，希望有志同道合的伙伴一起前進，坐標的話，估計你早就看見了。

老規矩: 歡迎Star(小編原諒我的表臉，逃)

項目Github地址
$ https://github.com/ZJH9Rondo/...

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

執行 npm install 前，先安裝依賴，由于 node-canvas 是C++寫的，并且，其中涉及到在后端Node中直接對css等進行設置，所以不僅需要當前的 OS 可以對node-canvas的項目文件進行編譯，還需要工作期間操作Canvas實例的依賴，所以安裝期間可能會或多或少的遇到問題，以下是操作流程(結合了node-canvas的READEME和編寫代碼期間遇到的問題)

根據當前的OS在Install前在終端執行響應命令,安裝對應包或依賴,必須成功后才可執行后續操作，否則安裝后項目也無法正常運行。

執行上述操作成功之后即可安裝項目

獲取源碼包:

$ git　clone git@github.com:ZJH9Rondo/Img-trans.git

安裝Package.json對應依賴:

$ sudo npm install

提醒一點: 如果當前用戶是將　npm　更新至＠５.0 版本，執行　sudo npm install 會在當前平行目錄生成　Package-lock.json 文件，這個是 npm 新版本加入的特征(規范),不影響正常使用，具體規范說明有需要可以看如下來自Stackoverflow的解釋。

前端用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的問題處理以及協同開發,此部分需求因人而異，有需要的可以關注，互相學習)