基于node-canvas 和 express 的一款圖片格式轉(zhuǎn)換工具,完善后會(huì)發(fā)布成npm
-
由于本項(xiàng)目當(dāng)前是Version@0.0.1袋马，還有很多不足支出，希望大家能指正，共勉匀钧。
這是我最近幾天在學(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ù)即可，無需去研究node-canvas的使用.
4.node-canvas的使用經(jīng)驗(yàn)搜索過施敢，只有少量使用介紹周荐，有必要結(jié)合此工具做完善拓展，使其能夠直接使用僵娃，繞過node-canvas這個(gè)安裝也不方便的坑概作。
Github Address
題主是一枚準(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/Img-transnode-canvas項(xiàng)目地址
$ https://github.com/Automattic/node-canvas
Install
執(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)目也無法正常運(yùn)行仰猖。
| 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 |
- 執(zhí)行上述操作成功之后即可安裝項(xiàng)目
獲取源碼包:
$ git clone git@github.com: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的解釋鸵赫。
How to use
- 前端用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è)試覆蓋率
后續(xù)功能開發(fā)
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í))
