nodejs之SVG轉圖片下載方案，nodejssvg圖片下載

最後更新：2015-07-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

nodejs之SVG轉圖片下載方案，nodejssvg圖片下載
頁面中有時使用者需要儲存或者下載顯示的svg圖，但是svg本身無法像圖片一樣“右鍵-圖片另存新檔”這樣儲存，可以有多種方案，這裡採用的是將svg轉成圖片再將其下載下來。

為實現這個方案，採用的是在node.js（若沒有請到https://nodejs.org/ 下載安裝）的基礎上使用phantomJS提供第三方支援，phantomjs是一個支援DOM，canvas，svg等web標準提供本地支援的Webkit，詳情請點擊http://phantomjs.org/ ，下面以Fedora-based（Red Hat 4.4.7-4）為例，先配置環境，再看程式碼範例。

環境配置：
1.執行如下命令安裝phantomjs編譯工具

sudo yum -y install gcc gcc-c++ make flex bison gperf ruby \
openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel \
libpng-devel libjpeg-devel
2.執行如下命令下載phantomjs原始碼並編譯

git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 2.0
./build.sh
這個過程比較慢，需要三四十分鐘，依作業系統的效能而定。編譯完後產生的可執行檔在/root/phantomjs/bin/下，進入此目錄後執行./phantom可運行。

3.設定path,執行如下命令

cd /etc
vim profile
開啟profile檔案後，按下insert鍵，游標移動到檔案末尾，斷行符號換行，加入下面的代碼

export PATH="/root/phantomjs/bin:$PATH"
4.第三方庫引用

建立package.json

{
"name": "test",
"version": "1.1.1",
"description": "convert svg to image on server side by phantomjs and nodejs",
"main": "phantom.js",
"dependencies": {
"express": "latest",
"phantom": "latest"
},
"devDependencies": {},
"scripts": {
"start": "node phantom.js"
},
"keywords": [
""
],
"author": "",
"license": "no"
}

package.json檔案定義了這個項目所需要的各種模組，以及項目的配置資訊（比如名稱、版本、許可證等中繼資料），其中dependencies節點中定義了所依賴的庫，執行nmp install會自動下載。詳情請進入http://javascript.ruanyifeng.com/nodejs/packagejson.html#toc0

需要引入express和phantom庫，它們的解釋如下：

express庫是用於開啟http服務，詳情請進入http://expressjs.com/zh/4x/api.html

phantom庫是作為串連phantomjs和node的橋樑，因為phantomjs本身不是nodejs module，使得phantomjs無法和npm一起使用，有了這個橋樑就可以既使用npm又可以隨心所欲的使用phantomjs的方法。詳情請進入https://github.com/sgentle/phantomjs-node。

環境配置就此結束，如果一切順利請看下面的程式碼範例：

程式碼範例：
1.檔案結構

建立一個檔案夾，例如phantomjsTest，裡面有一個index.html，一個phantom.js和package.json檔案。

index.html:

<!DOCTYPE HTML>
<html>
<head>
<title>Shell</title>
</head>
<body>
<div id="Viewport" style="display:inline-block;">
</div>
</body>
</html>
phantom.js

var phantom = require('phantom');
var fs = require('fs');
var express = require('express');
var app = express();

app.get('/', function(req, res) {
//svg html
var svgString = "<svg width='100' height='100'><g><rect x='0' y='0' width='100' height='100' fill='black'/></g></svg>";
//建立phantom執行個體
phantom.create(function(ph) {
//建立page執行個體
ph.createPage(function(page) {
//載入頁面
page.open("index.html", function(status) {
//將svg加入到頁面中,設定剪輯的矩形
page.evaluate(function(svgString) {
var selector = "#Viewport";
document.querySelector(selector).innerHTML = svgString;
return document.querySelector(selector).getBoundingClientRect();
},
function(result) {
//設定剪輯框
page.set("clipRect", result);
//產生png圖片
page.render('a.png', {
format: 'png',
quality: '100'
}, function() {
//下載圖片到用戶端
res.download('a.png', "test.png");
});
},

svgString);
});
});
});
});

var server = app.listen(3040, function() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s%s', host, port);
});
上面的例子就是將一段svg的html字串

<svg width='100' height='100'><g><rect x='0' y='0' width='100' height='100' fill='black'/></g></svg>
插入到index.html頁面中，這是個長寬各100的填充為黑色的矩形，然後利用phantomjs將其產生a.png圖片，再下載下來，其中圖片的名稱可以通過

res.download(<sourcefilepath>, <downloadfilename>);
自訂。

運行：
上述一切準備就緒後，下面看看效果。執行命令:

npm install
node phantom.js
控制台出現如下介面：

在瀏覽器中輸入地址http://host:3040(host為linux的IP)，即可下載下來一張圖片。

開啟test.png,顯示

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More