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

由于本項(xiàng)目當(dāng)前是[email protected]，還有很多不足支出，希望大家能指正，共勉。

這是我最近幾天在學(xué)Node的時(shí)候想著做的一個(gè)工具，為什么做這個(gè)?
原因有三點(diǎn)：

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

２.Node強(qiáng)大的異步IO機(jī)制使得對(duì)大文件操作也不會(huì)怕頁(yè)面阻塞，直接由Ajax發(fā)送請(qǐng)求，等待后臺(tái)處理完響應(yīng)后直接接收?qǐng)D片即可，并且?guī)啄昵耙灿写笈ｉ_發(fā)出基于C++的node-canvas的模塊，并且一直也有很好的維護(hù)，也為在后端使用Canvas進(jìn)行功能開發(fā)提供了可能，也降低了圖片處理方面的難度。

３.極大降低前端對(duì)此需求的使用難度，只需對(duì)照READEME理解后，使用Ajax發(fā)送相應(yīng)參數(shù)即可，無(wú)需去研究node-canvas的使用.

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

題主是一枚準(zhǔn)大三狗(雖然資質(zhì)平平，但是初期寫這個(gè)還是仔細(xì)看了node-canvas的READEME的才寫的)，此項(xiàng)目準(zhǔn)備長(zhǎng)期維護(hù)，直至功能完全完善，有興趣使用的歡迎指正的關(guān)注，因?yàn)橐彩且恢痹诿髦斑M(jìn)，希望有志同道合的伙伴一起前進(jìn)，坐標(biāo)的話，估計(jì)你早就看見了。

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

項(xiàng)目Github地址
$ https://github.com/ZJH9Rondo/...

node-canvas項(xiàng)目地址
$ https://github.com/Automattic...

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

根據(jù)當(dāng)前的OS在Install前在終端執(zhí)行響應(yīng)命令,安裝對(duì)應(yīng)包或依賴,必須成功后才可執(zhí)行后續(xù)操作，否則安裝后項(xiàng)目也無(wú)法正常運(yùn)行。

執(zhí)行上述操作成功之后即可安裝項(xiàng)目

獲取源碼包:

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

安裝Package.json對(duì)應(yīng)依賴:

$ sudo npm install

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

前端用ajax發(fā)送數(shù)據(jù)，后端接收后對(duì)對(duì)應(yīng)圖片進(jìn)行處理，之后響應(yīng)返回為一個(gè)轉(zhuǎn)換后圖片的url

上述基本說明有一點(diǎn)有必要說明，當(dāng)前的基礎(chǔ)版本暫時(shí)沒有加入上傳文件進(jìn)行轉(zhuǎn)換的需求，開發(fā)構(gòu)想基本使用場(chǎng)景是　個(gè)人網(wǎng)站或圖片格式轉(zhuǎn)換功能開發(fā)中,當(dāng)前站點(diǎn)的對(duì)圖片格式轉(zhuǎn)換的簡(jiǎn)單功能需求，所以直接是通過 url 讀取站點(diǎn)的圖片文件進(jìn)行轉(zhuǎn)換操作，后續(xù)會(huì)加入文件上傳處理。

Ajax的參數(shù)說明

PNG SVG JPEG的參數(shù)說明(以　PNG　為例):

由于測(cè)試是用本地自己封裝的一個(gè)Ajax測(cè)試的，所以格式可能會(huì)有點(diǎn)差別

var data = {

"source": src,      // 需轉(zhuǎn)換圖片的

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

"width": 794,      // Canvas的width

"height": 1123,    // Canvas的height

"outUrl": "./image/newImg/",  // 生成轉(zhuǎn)換文件的存放路徑

"type": "png"    　// 文件轉(zhuǎn)換格式

};

其中, src 建議使用相對(duì)路徑,其值的獲取可以自由輸入,也可以通過js獲取,但是在獲取的時(shí)候建議使用　getAttribute() 獲取,而非　img.src 。

PDF 的問題需要仔細(xì)說明,如下:

示例圖為本地生成一標(biāo)準(zhǔn)A4紙大小的PDF圖片，截取了上半部作為示例

PDF轉(zhuǎn)換存在POST發(fā)送請(qǐng)求數(shù)據(jù),需要使用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參數(shù)說明

h1: 當(dāng)前PDF的內(nèi)容標(biāo)題設(shè)置

p: 當(dāng)前PDF的文本內(nèi)容文本,但是當(dāng)前由于node-canvas的 p 函數(shù)解析對(duì)于過長(zhǎng)的文本沒有自動(dòng)換行的處理，當(dāng)前版本的后續(xù)更新會(huì)對(duì)此在后臺(tái)通

過js做處理。

其余與上相同，又去當(dāng)前開發(fā)的只是返回了Url,所以具體生成的文件除PDF外都能在測(cè)試時(shí)直接使用返回的URL看到效果,后續(xù)的開發(fā)功能會(huì)及時(shí)更新添加，目前使用對(duì)于圖片格式轉(zhuǎn)換沒有問題。

PDF中 Ajax 請(qǐng)求發(fā)送必須使用　POST 發(fā)送數(shù)據(jù),并且在啟動(dòng)Ajax之前需要對(duì)data做處理，使用 JSON.stringify() 做處理,并且設(shè)置 Request Headers 中的 Content-Type 為　application/json ,這樣后端才能正常接收并解析請(qǐng)求中Url所攜帶的數(shù)據(jù)。

index.html 為我在本地的簡(jiǎn)單測(cè)試文件，初期功能簡(jiǎn)單，后續(xù)會(huì)使用測(cè)試腳本測(cè)試覆蓋率

PDF的text長(zhǎng)文本裁剪轉(zhuǎn)換

PDF返回文件支持下載

PDF多文本轉(zhuǎn)換

Canvas轉(zhuǎn)換后清晰度下降問題

近期會(huì)寫幾篇做這個(gè)東西所涉及的一些知識(shí)點(diǎn)總結(jié)(主要是關(guān)于 Node 和 HTTP 以及　Git的問題處理以及協(xié)同開發(fā),此部分需求因人而異，有需要的可以關(guān)注，互相學(xué)習(xí))