Ⅰ 怎麼使用node.js進行快速截圖
使用nodejs進行截圖，推薦使用phantomjs實現。phantomjs是一個無頭瀏覽器，能夠實現截屏，網路專請求監測，自動化測屬試等功能。具體所有例子可以在phantomjs官網找到，下面給一個官網截屏的實例：
//index.js
varpage=require('webpage').create();
page.open('
,function(){
page.render('github.png');
phantom.exit();
});
//命令行調用
phantomjsindex.js
通常也會用casperjs（webkit）來實現截圖，它有更好用的api封裝方便實現各種操作。在Gecko內核下則使用slimerjs實現。
不過google官方團隊也出了針對chrome的無頭瀏覽器工具puppeteer，現在版本是0.9.0，這款工具是單獨針對Chrome瀏覽實現的，提供了強大但是簡單實用的api。
以上關鍵詞 phantomjs、casperjs、slimerjs及puppeteer均可在gitHub上找到，且可以自行下載包查看示例。
Ⅱ js能夠實現截圖嗎
一個叫做html2canvas的庫，非常棒的一個庫，很強大、但用法非常簡單.就這么簡單的方法，就可以把我的整個頁面截圖下來了：
function convertHtml2Canvas() { html2canvas(document.body, { allowTaint: false, taintTest: true }).then(function(canvas) { document.body.appendChild(canvas); }).catch(function(e) { console.error('error', e); }); }
目前還有一個問題，就是這種方法默認是把整個頁面截取下來的（就是說，會以你的innerHeight和innerWidth為邊界，會存在大量的空白），可是，我的卡組只是佔了頁面的一小部分，我只想要卡組的部分啊。其實已經有了canvas就好辦了，我們可以對它進行處理啊。大概思路是：1.把上面得到的canvas對象轉成Blob並放到一個img元素。然後再把img.src繪制到canvas裡面。這時候調用canvas.drawImage方法就可以截取我們想要的內容了。
Ⅲ 如何用phantomjs操作修改DOM並截圖
參考phantomjs的API Reference，我們主要要利用的就是這個函數，它的usage如下：
evaluate(function, arg1, arg2, ...) {object}
Evaluates the given function in the context of the web page. The execution is sandboxed, the web page has no access to the phantom object and it can』t probe its own setting.
Example:
var page = require('webpage').create();
page.open('http://m.bing.com', function(status) {
var title = page.evaluate(function() {
return document.title;
});
console.log(title);
phantom.exit();
});
例子中是返回了該網頁的title，並且列印到了console中，這只是第一步實現了獲取DOM的信息，那麼如何修改DOM呢？很簡單，javascript如何做，我們就如何做。
演示下如何替換phantomjs官網首頁的banner圖片，為我們自定義的一個圖片鏈接地址。
console.log('Loading a web page');
var file = "test.png"
var page = require('webpage').create();
var url = 'http://www.phantomjs.org/';
page.open(url, function (status) {
//Page is loaded!
if ( status !== "success") {
console.log("Unable to render '"+url+"'");
} else {
var imgTagSrc = page.evaluate(function(){
var imgTag = document.body.getElementsByTagName("img")[0];
imgTag.setAttribute("src", "http://localhost:8080");
return imgTag.src;
});
window.setTimeout(function () {
console.log(imgTagSrc)
page.render(file);
phantom.exit();
}, 3000);
}
});
解釋下下面的snippet表示，獲取該網頁中的第一個img節點，並且將其的src屬性修改為我們自定義的一個圖片服務地址。
var imgTagSrc = page.evaluate(function(){ var imgTag = document.body.getElementsByTagName("img")[0]; imgTag.setAttribute("src", "http://localhost:8080"); return imgTag.src; });
然後，再解釋下下面的snippet表示，獲取該網頁中的第一個img節點，並且將其的src屬性修改為我們自定義的一個圖片服務地址。這里有一個
trick，就是setTimeout函數的應用，如果不用該函數，那麼phantomjs會立即render截圖，這樣子是無法替換鏈接的，需要有一個
時間的緩沖來渲染。
window.setTimeout(function () { console.log(imgTagSrc) page.render(file); phantom.exit(); }, 3000);
保存以上代碼到一個test.js中，執行命了如下就可以輸出一個png的截圖了。
# phantomjs.exe test.js
Loading a web page
http://localhost:8080/
大功告成，離別blog很久了，宣布正式回歸！
睡覺前提醒自己 Do something today that your future self will thank you for.
在前一篇初
步學會了如何使用phantomjs實現基本的網頁截圖，跟進上一篇的TODO，如何操作網頁的DOM後再進行截圖呢？That is to say,
how to use phantomjs to manipulate DOM and render image？
參考phantom[......]
Ⅳ javascript 網頁截圖 保存為本地圖片
可以做得到。註明：內容非原創。學習javascript的時候覺得好就保存下來的文章：
html2canvas是一個相當不錯的JavaScript類庫，它使用了html5和css3的一些新功能特性，實現了在客戶端對網頁進行截圖的功
能。html2canvas通過獲取頁面的DOM和元素的樣式信息，並將其渲染成canvas圖片，從而實現給頁面截圖的功能。
它不需要來自伺服器任何渲染，整張圖片都是在客戶端瀏覽器創建。當瀏覽器不支持Canvas時，將採用Flashcanvas或
ExplorerCanvas技術代替實現。以下瀏覽器能夠很好的支持該腳本：Firefox 3.5+, Google Chrome,
Opera新的版本, IE9以上的瀏覽器。
因為每個瀏覽器渲染頁面的方式都不盡相同，所以生成的圖片也不太一樣。雖然它目前還是處理開發階段，但還是很值得期待的。
這個插件依賴於jQuery插件，建議使用最新版的。
兼容性
html2canvas能在以下的瀏覽器中完美的運行。
- Firefox 3.5+
- Chrome
- Opera
- IE9使用方法
1、引入文件
首先我們需要引入jQuery庫和html2canvas插件文件，注意html2canvas插件文件一定要在jQuery的後面引入，不然會報錯。
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
2、調用插件
通過html2canvas方法調用插件，該方法接受兩個參數，第一個為要生成截圖的DOM元素，第二個參數為插件的配置
html2canvas(document.body,{allowTaint:true,taintTest:false,
onrendered:function(canvas){canvas.id="mycanvas";
//document.body.appendChild(canvas);//生成base64圖片數據vardataUrl=
canvas.toDataURL();varnewImg=document.createElement("img");
newImg.src=dataUrl;document.body.appendChild(newImg);}});通過一個回調函數來處理獲取到的截圖。
圖片跨域問題
在網頁的圖片中，如果有跨域圖片，調用toDataURL的時候會出錯
SecurityError: The operation is insecure.
解決方法是在跨域的伺服器上設置header設置為允許跨域請求
access-control-allow-origin: * access-control-allow-credentials: true
官網主頁: http://html2canvas.hertzen.com/
本站文章除註明轉載外，均為本站原創或翻譯，歡迎任何形式的轉載，但請務必註明出處，尊重他人勞動共創和諧網路環境。
轉載請註明：文章轉載自：問說 » html2canvas根據DOM元素樣式實現網頁截圖
本文標題：html2canvas根據DOM元素樣式實現網頁截圖
本文地址：http://www.uedsc.com/html2canvas.html
原文鏈接：http://www.uedsc.com/html2canvas.html
Ⅳ 怎麼使用node.js進行快速截圖
使用node-webshot進行網頁截圖
用到的npm模塊有yargs和node-webshot，關於yargs的文章參考這里 從零開始打造個人專屬命令行工具集——yargs完全指南 。
node-webshot是調用phantomjs來生成網頁截圖的，phantomjs是非常有名的npm項目，相當於一個腳本版的WebKit瀏覽器 ，通過phantomjs可以使用腳本 和網頁進行交互，所以phantomjs經常用來進行網頁自動化測試。
phantomjs會和普通的瀏覽器一樣載入完整的網頁內容，然後在內存裡面進行渲染，雖然肉眼看不到它渲染的頁面，但是通過生成圖片就可以看到了，node-webshot使用的就是phantomjs的render介面來獲取網頁截圖的。
node-webshot生成谷歌首頁的示例代碼：
var webshot = require('webshot'); webshot('google.com', 'google.png', function(err) { // screenshot now saved to google.png});phantomjs生成谷歌首頁的示例代碼： var page = require('webpage').create();page.open('http://github.com/', function() { page.render('github.png'); phantom.exit();});
那為什麼不直接使用phantomjs呢?一個字懶!
另外node-webshot還對文件讀寫進行了簡單的封裝，相信任何熟悉node.js的開發人員，都能很簡單的寫出這樣的介面，但是既然輪子好用就不要自己造了。
node-webshot流式調用的寫法：
var webshot = require('webshot');var fs = require('fs'); var renderStream = webshot('google.com');var file = fs.createWriteStream('google.png', {encoding: 'binary'}); renderStream.on('data', function(data) { file.write(data.toString('binary'), 'binary');});
node-webshit還支持生成移動版的網頁截圖：
var webshot = require('webshot'); var options = { screenSize: { width: 320 , height: 480 }, shotSize: { width: 320 , height: 'all' }, userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us)' + ' AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'}; webshot('flickr.com', 'flickr.jpeg', options, function(err) { // screenshot now saved to flickr.jpeg});
最後再把yargs和node-webshot進行集成，可惜這部分工作人家也幫我們做好了，直接安裝就行。
npm isntall -g webshot-cli
使用desktop-screenshot進行系統截圖
desktop-screenshot是一個跨平台的系統截圖項目，用法和node-webshot類似，只是少了一個url參數。var screenshot = require('desktop-screenshot'); screenshot("screenshot.png", function(error, complete) { if(error) console.log("Screenshot failed", error); else console.log("Screenshot succeeded");});