Ⅰ 怎么使用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");});