windows下的node-canvas歷程

背景：因爲在前期開發的過程當中，對前端的小圖片採用了css-sprite，開始的時候都是在http://spritegen.website-performance.org/站點上合成圖片及樣式的，可是某天該站點忽然不能訪問，開始還懷疑是運維把站點給屏蔽了，後來才知道這個站點真的掛了，頓時以爲使用web站點上的工具太沒有安全感了，因此決定在本地搭建一個css-sprite的工具環境。

因此接下來就是nodejs的css-sprite之旅了。nodejs處理圖片須要使用到node-canvas這個圖像模塊，在windows環境下搭建整個環境仍是須要幾個步驟：

1.安裝Python 2.7版本，3.0以上不支持；下載地址：https://www.python.org/downloads/

2.安裝node-gyp模塊，使用命令行：npm install -g node-gyp；

3.安裝Visual C++ 2010 Express，編譯時須要使用，下載地址：http://www.visualstudio.com/zh-cn/downloads/download-visual-studio-vs#DownloadFamilies_4

4.下載GTK包並解壓在C:\GTK目錄下並添加C:\GTK\bin到系統path路徑中；

   (GTK+, or the GIMP Toolkit, is a multi-platform toolkit for creating graphical user interfaces. Offering a complete set of widgets, GTK+ is suitable for projects ranging from small one-off tools to complete application suites.)

   win64下載地址(推薦)：http://ftp.gnome.org/pub/gnome/binaries/win64/gtk+/2.22/gtk+-bundle_2.22.1-20101229_win64.zip

5.安裝node-canvas模塊，使用命令行：npm install -g node-canvas；

   編譯成功後，在全局模塊目錄下會存在npm\node_modules\canvas\build\Release\canvas.node文件，在此目錄下使用node命令行執行var c = require('canvas');若是輸出undefine則編譯成功；

到此，不知道你已經踩過幾個坑了，反正我踩好些個。

1.因爲我以前安裝了Python 3.0以上版本，故在node-canvas編譯時報錯，此錯誤在錯誤提示信息中很明顯，直接下載個Python 2.7版本並改寫path路徑便可解決。

2.開始時我是在http://www.gtk.org/download/win64.php下載all-in-one bundle(即GTK+的全部編譯文件)，這個已經是當前最新版本gtk+-bundle_3.6.4-20131201_win64，

   可是在使用該版本編譯時會提示C:\GTK\lib\libpng.lib未找到的錯誤，這是一個圖片處理的核心庫文件，不知道包提供者爲何沒有把libpng給編譯成lib文件。這個問題編譯出來也很明顯，因此就在GTK+站點上下載了libpng模塊，提取其中的libpng.lib文件，libpng1.5版本沒有提供libpng.lib文件，libpng1.4版本中有提供，因此我就使用了1.4版本中的libpng.lib文件，編譯成功後執行var c = require('canvas');提示模塊缺失，就使用了depends檢查Release目錄下canvas.node的dll依賴，發現存在幾個dll缺失的狀況，從系統system32中查找相應的dll並拷貝到C:\GTK\bin目錄下，運行var c = require('canvas');輸出爲undefined。正確。

depends下載地址：http://www.dependencywalker.com/

3.運行npm install spritegen下載spritegen模塊，該模塊調用canvas作了些css-sprite的功能，運行其中的test，執行失敗，提示libpng的1.4與1.5版本使用衝突，具體是C:\GTK\include\libpng15使用了libpng 1.5版本可是在問題2解決的過程當中我使用了1.4版本中的lib文件，因爲站點上下載的libpng1.5版本未能提供.lib文件，因此我嘗試使用vc++ 2010版本編譯，可是未能成功，因爲受限於公司開發環境也不想在vs版本上作過多糾纏，因此就想在web上download一個libpng.lib文件，可是所download的文件均未能正常編譯。最後放棄了GTK+的最新版本使用了gtk+-bundle_2.22.1-20101229_win64版本，node-canvas正常編譯，且執行spritegen test成功，即canvas模塊能正常使用了。

 

一切問題解決完就是在spritegen代碼的基礎上增長本身的功能了，保證和spritegen.website-performance.org站點生成出來的格式一致，這樣也就不用去改之前寫好的css樣式了，並且也能夠添加本身想要的功能，最最重要的是在本地生成，安全便捷可重用^_^。

參考：

https://github.com/Ancestry/spritegen

http://delarre.net/posts/installing-node-canvas-for-windows/

https://github.com/LearnBoost/node-canvas/wiki/Installation---Windows#installing-python-for-windows

http://www.gtk.org/download/win64.php