如何对整个网页截图？
内容为广告/垃圾，我要举报！
特聘专家具有协助内容审核的特权
举报后内容将不能在前台展示
错乱举报会导致该权利被剥夺
选择举报原因&
我需要一个网页截图，但是这个网页太长了，有好几屏那么长，一次没法截，只能几张图拼一起，有办法一次给整个网页截图吗？
已有2条答案
确实有很多时候，需要截一整个网页，而网页又太长，我以前也是和你说的那样，一张张的截图，然后用PhotoShop给一个个拼起来，少的时候还行，多的时候，真受不了，后来我发现了两个可以截整个网页的办法，一个是用软件红蜻蜓，一个是用chrome浏览器和扩展程序。一、Chrome浏览器+网页截图扩展（由Google提供）1、首先您必须有Chrome浏览器Chrome下载：2、下载并安装了Chrome后，打开Chrome，并使用Chrome下载：网页截图扩展（由Google提供）:3、点击右上角的安装到Chrome4、安装好扩展后，会在Chrome的右上角多出一个图标，点击图标即可选择相应的截图，比如整张网页截图一、使用红蜻蜓抓图精灵进行整张网页截图1、下载并安装红蜻蜓抓图精灵：2、运行红蜻蜓抓图精灵，在左侧选择：选定网页，然后将要截图的网页放到最前面（只支持IE核心的浏览器），然后按Ctrl+Shift+C后，点击一下要截图的浏览器即完成了截图更多的问题，您可以参考软件应用的论坛：
选择举报原因&
点击浏览器菜单栏页面另存为……保存好后。你在打开把重要的截图下来就好了。
选择举报原因&
微信公众账号ZOL问答堂
关注微信，随时随地解答您的疑惑
ZOL问答堂官方微博@ZOL问答堂
微信公众账号
没找到想要的答案？那就登录提问吧【总结】浏览器中的开发人员工具（IE9的F12和Chrome的Ctrl+Shift+I）-网页分析的利器
【什么是浏览器中开发人员工具Developer Tools】
之前无意间知道了Chrome中有个开发人员工具，后来又无意间发现IE9中也有类似的工具，都可以用来调试网页，对于网页相关开发，比如分析网页执行过程，抓取网页内容等，很有用。
对于不了解的基本的抓取网页的逻辑，可以参考：
【如何打开“开发人员工具”】
IE9：Tools-&F12 Developer Tools，快捷键是F12
Chrome：浏览器地址栏右边那个扳手的图标的配置按钮-&工具-&开发人员工具，快捷键是Ctrl+Shift+I
【IE9和Chrome的开发人员工具 使用心得】
下面简单记录一下，对于使用IE9和Chrome的开发人员工具过程中的一些心得。
【IE9的F12 Developer Tools开发人员工具 和Chrome的Ctrl+Shift+I的开发人员工具 所共有的功能】
1.支持对于抓取的每个页面的详细的request header/post data，response header，cookie等信息
IE9和Chrome中的这些功能，是开发工具中的核心的功能，对于任何一款开发工具，都应该是必备的，所以两者都支持，只是各自显示出来方式不同而已。具体不同的显示，算是各有各的特色。
而IE9中有普通列表显示和详细显示（Goto detail view），前者比较方便看到网页执行过程的先后顺序，后者可以很详细各项信息。
Chrome中支持普通的大图标形式和小图标（点击左下角那个蓝色列表小图标，use small resource row）来显示。
2.对于网页跳转后，是否清除之前抓取的内容，可以自己设置
选项设置是Tools-&Clear Entries on navigate，
默认是对于console和Network都打勾了，意思是，在开启捕获浏览器的内容之后，对于打开一个网页，自动就会捕获所有内容，但是期间如果网页自动跳转到另外别的地址，那么默认的设置会自动清除之前捕获的内容，而只显示最新当前网页相关的内容。
而在网页分析开发过程中，很可能会遇到登陆同一网页，但是该网页内部会跳转多次，导致很难去分析其跳转过程，而通过更改此设置，可以实现全部显示整个网页从前到后跳转的所有的内容。
所以，对应的可以去取消对于Network的选择：
那么所抓取的内容，都全部都保留了，包括网页跳转之前的所有的内容。
如果像我之前一样，不知道有此设置，那么分析网页跳转，就悲催了。
而通过手动点击停止捕获的方法，是很难或者说是无法有效的抓取到所要的网页内容的。
对应的，在network捕获出来的网页request中，不同navigation网页跳转之间，还有一条水平分割线，方便查看。
后来才发现有这个好用的功能。在此特地感谢IE9提供了这样的好的工具。
Chrome中是通过直接点击左下方那个黑圆圈（Preserve Log Upon Navigation）：
来实现对于网页跳转后，是否清除原先已经捕获的内容。
（2）清除所有已经捕获的内容
IE9是直接点击Clear
Chrome是左下角那个圆圈里面加个反斜杠的图标（Clear）：
来清除所有已经抓取的内容的。
3.清除cache和cookie
对于分析网站的过程中，可能会遇到需要清除之前访问网页所得到的已有的缓存和cookie，传统方法是:
对于IE，是到对应的IE临时文件夹中，去清除对应的一个个的cookie和对应的已下载的网页的文件：
而对于Chrome，只能通过：选项-&高级选项-&隐私设置-&清除浏览数据-&勾选 清空缓存，删除cookie以及其他网站数据和插件数据，来实现清除cache和cookie的功能。
而此处开发工具中，各自带了对应的功能：
IE9：清除cache和cookie很方便
此工具此处提供了很方便的清除的功能：
Clear Browser cache for this domain:清除对应的缓存。
clear sesson cookies: 清除当前session（访问当前网页）多对应的cookie，比如登陆了一个skydrive，本地会有对应的session的cookie，此处清除掉之后，就相当于退出登陆了。
clear cookies for domain: 清除当前域名所对应的cookie，比如当前是，然后此处就可以直接清除所对应的cookie
Chrome：清除cache和cookie不太方便
只能通过右击任一抓取到的页面，选项 clear browser caches 和clear browser cookies：
来实现删除cache和cookie的功能，而不能像IE9中提供方便的清除当前domain和session的cache和cookie的功能。
而想要清除指定的cache和cookie，包括指定的domain和当前session的。只能去Resource-&Cookies-&点击某个domain-&右击某个cookie-&delete：
但是却无法全选，无法一次全部删除。
总之功能上，删除cookie和cache，没IE9方便。
【IE9的F12 Developer Tools开发人员工具】
1.支持IE7，IE8等兼容模式
有个Browser Mode，支持IE7，IE8，IE9，IE9 Compatibility View，其可能的作用是，比如浏览铁道部的在线购买火车票的那个12306网站，其不支持IE9，此处就可以通过设置为IE8或IE7模式，以实现可以正常登陆和操作该网站了，否则有些内容在IE9下会有问题，比如我之前遇到的购买车票时要选择日期，就无法选择，通过此方法，就能搞定类似问题了。
2.支持多种User-Agent
对于想要模拟其他不同浏览器或者特定的需要，可以去：
Tools-&Change User agent string中：
去设置不同的值。
默认是IE9，其他还支持IE6，IE7，IE8，Google Chrome，Mozilla Firefox，Opera，Bing Bot，设置还可以Custom自定义自己所需要的值。
3.一些小工具：标尺Ruler，颜色选取器Color Picker等
Tools-& show ruler（Ctrl+L），显示标尺，方便查看网页元素的位置。
Tools-&Show color picker（ctrl+K）：可以捕获屏幕的像素点的颜色，对于html开发人员应该比较有用。
4.javascript格式化
对于此功能，要单独在此提醒一下。
因为之前在写python脚本抓取网页，分析网页的时候，就遇到过关于将杂乱的js脚本格式化成易读的格式，后来找来找去，找到一些网站：
去实现js格式化的功能。
而今天无意间发现，原来IE9中，也有此功能。
Script-&那个工具图标（configuration Ctrl+Alt+O）-&Format Javascript：
同时也有自动换行Word Warp。
5.关于javascript调试功能
这个是后来才发现的，对于开发，分析js源码执行过程来说，极其好用的功能。
Script –& Start Debug(F5)
对于如何开始调试，需要提示一下。
对于打开某个网页后，开发工具会自动识别其中的js脚本，然后并列出来：
选择好自己要调试的js，对着需要打断点的地方点击右键-&Insert Breakpoint，然后点击Start Debuging，然后会自动重新载入，就可以开始调试，运行到对应的断点的地方，就会停下来，余下的调试，和Visual Studio 中都很类似了，其中F5是开始调试，F10是按行执行，F11是逐条语句，进入函数式的执行，Shift+F11是跳出函数。
如果点击Start Debuging后，脚本不执行，那么尝试在地址栏中重新输入当地网址，重新载入页面，如果重新载入的页面中，对应的js文件没变的话，即还是包含当前你所加了断点的js文件，那么就可以开始当重新载入网页，运行到你所加断点的位置，然后就可以开始调试了。
此处关于IE9中的调试javascript，说说我所遇到的，需要注意的一些情况：
1.如果重新载入网页，没有包含你之前加了断点的js文件，那么肯定也就无法运行到对应的断点位置，你也就没法debug了。此种情况，我就遇到，skydrive中，载入对应的js文件，是访问类似于这样的地址：
其中2Jro0r84zTRoocI0W5VmeA是每次都不一样的，导致我对当前js文件添加了断点，结果重新载入网页，所获得的页面中，由于这个Bucket1.js的地址变了，就没法运行到我这个地址了。
所以，也就没法debug了。很是郁闷。此种情况，对于别的一般的网站，应该很少出现的。
也只是会在涉及https，加密的文件等情况中，才会遇到这样的事情。
2.如果你js中加断点的位置，是重新载入js重新运行，而没有执行到的位置，那么当前也就无法debug了。
此种情况，有可能出现在，你自己对js中函数的执行流程理解错了，因此打的断点，实际没有执行到。
此种情况，也是需要注意的，尤其是很复杂的js，要多打几个可能会运行到的断点，以避免没有执行到断点的情况。
3.如果遇到调试过程中，对于变量（全局，局部）想要修改其值，但是实际却修改不了，即不给修改，改了也没用，那么又想要实现控制函数的运行，那么可以换种方式。
即点击你想要其函数执行的对应的语句，比如if中的else部分之类的，那么可以对着对应，想要跳转过去的语句，右击，选择“设置下一条语句”：
然后就跳转到对应的语句去了，就可以间接实现改变程序运行逻辑的功能了。
另外值得一提的是，调试过程中，变量的显示，很是方便，和Visual Studio
2010中的一样，可以通过鼠标移动到对应变量上面，就可以动态显示对应的变量的值，极大地方便了调试，而且调试界面，不得不说，的确做得很好看，也算很好用。
6.查看当前cookies的值
可以通过Cache-&view cookie information，会打开一个新的页面，显示出当前所有的cookie的值，也算方便开发者查看cookie的值了。
7.查找功能很好用
可以实现类似于全文查找，在整个项目中查找的功能，在查找框中输入一个字符串，可以在抓取的网页源码中，request header，response header等内容中去查找，方便分析源码。
1.使用该开发人员工具之前，比如先打开某个页面才可以
需要当前打开一个页面，然后才可以F12调出该工具，否则无法调出该开发人员工具。这点对于不熟悉的人，还是要提醒一下的。
2.Pin之后的F12的窗口高度最高只能是页面高度的一半
如果将开发工具Pin（Ctrl+P）：
到当前页面中后，对于开发工具的高度，拖拽是可以改变高度的，但是最高只能是当前页面的一半的高度，剩下上面一半高度，留作显示网页内容。
此点还是不太爽的，不能像Chrome中一样，自己随意拖拽改变高度。
感觉像是，开发IE9开发工具的的开发人员，多此一举的为用户考虑了，才导致现在的强制规定Pin到窗口的开发工具的高度，最高只能是窗口高度的一半。
【Chrome的Ctrl+Shift+I的开发人员工具】
1.一键拷贝
在Network界面下，对于抓取到的任何一个页面，
右键点击，可以出现多个选项，其中有copy request headers选项，支持一键拷贝所有的request header信息。
类似的功能还有一键拷贝response header等，还是很方便拷贝信息，用于分析的。
否则，就要自己手动用鼠标选择，再拷贝，就有点麻烦了。
2.在查看网页相关内容时候，支持view source和view parsed模式之间切换
在分析网页提交内容，返回的值等过程中，所看到的request header，request post data，response header等信息的时候，有view source和view parsed两种模式，点击即可及时切换，方便了数据分析。
其中对于数据，parsed就是源码中用UrlEncode编码之后的数据，比如将斜杠/变成%2F。
对于header，parsed就是对于原始的header数据按照协议规范去解析。
1.不能很方便的查找
经常需要查找某个变量或者字符串，结果在Chrome的开发人员工具中，无法搜索到，只有打开了所抓取的，某个html网页，然后搜索才能搜到，而对于其他在request header或者是response header中的值，就无法搜索，这点很是不爽，导致网页分析无法继续下去。
而对应的IE9就支持，类似于全文搜索的功能，可以直接在所有的内容中查找，很是方便，在此赞一下。
1.分析网页的执行，跳转等过程中，可以的话，最好还是IE9和Chrome都同时使用，这样易于发现真正的执行过程。
否则万一遇到类似IE9有bug而Chrome是正常的，此时就不会被bug所打扰，而找到真正的网页的执行过程。
比如，遇到一个IE9中的bug，对于访问一个网页所产生的重定向redirect，而抓取的过程中，跳转后的地址的request header中，就显示了多余的内容，导致混淆了分析的过程。而对应的Chrome中，就可以正常抓取并显示此跳转的过程。
, , , , , ,
分类目录分类目录
选择分类目录
Uncategorized&&(10)
单身恋爱婚姻家庭&&(112)
&&&Lovestory&&(7)
&&&单身&&(21)
&&&婚姻&家庭&&(34)
&&&恋爱&&(46)
哲理 人生 故事&&(210)
&&&哲理佳句&&(39)
&&&电视剧《天道》&&(6)
&&&财富人生&&(44)
工作和技术&&(3,664)
&&&CharEncoding&&(3)
&&&CodeShare&&(17)
&&&CompilerLinkerParser&&(94)
&&&&&&ANTLR&&(92)
&&&&&&JavaCC&&(1)
&&&DevToolSoft&&(74)
&&&&&&Linux on Win&&(40)
&&&&&&&&&Cygwin&&(33)
&&&&&&&&&Gow&&(1)
&&&&&&&&&MingW&&(3)
&&&&&&&&&MSYS&&(3)
&&&&&&Putty&&(1)
&&&&&&Total Commander&&(2)
&&&&&&VersionControl&&(27)
&&&&&&&&&Git&&(18)
&&&&&&&&&SVN&&(7)
&&&Docbook&&(127)
&&&DocxyGen&&(1)
&&&Elance&&(6)
&&&Embedded&&(517)
&&&&&&BusyBox&&(2)
&&&&&&CrossCompiler&&(102)
&&&&&&&&&Buildroot&&(30)
&&&&&&&&&crosstool-ng&&(40)
&&&&&&Embedded Emulator&&(15)
&&&&&&&&&QEMU&&(15)
&&&&&&Embedded Filesystem&&(4)
&&&&&&&&&Yaffs2&&(2)
&&&&&&Embedded IDE&&(3)
&&&&&&&&&HEW&&(1)
&&&&&&&&&IAR&&(1)
&&&&&&Embedded OnChip Resource&&(2)
&&&&&&&&&Memory&&(2)
&&&&&&&&&&&&SDRAM&&(1)
&&&&&&Embedded OS&&(9)
&&&&&&&&&Realtime OS&&(2)
&&&&&&Embedded Peripherals&&(112)
&&&&&&&&&Bluetooth&&(21)
&&&&&&&&&CAN Bus&&(2)
&&&&&&&&&DMA&&(1)
&&&&&&&&&GPIO&&(1)
&&&&&&&&&Serial Communication&&(13)
&&&&&&&&&&&&RS232&&(10)
&&&&&&&&&&&&&&&SecureCRT&&(3)
&&&&&&&&&&&&RS485&&(2)
&&&&&&&&&Storage&&(73)
&&&&&&&&&&&&Flash&&(31)
&&&&&&&&&&&&SD/MMC&&(9)
&&&&&&&&&&&&USB&&(32)
&&&&&&Fieldbus&&(57)
&&&&&&&&&DTM&&(1)
&&&&&&&&&EDDL&&(10)
&&&&&&&&&HART&&(29)
&&&&&&&&&Modbus&&(1)
&&&&&&&&&Profibus&&(6)
&&&&&&&&&PROFINET&&(2)
&&&&&&Industrial Automation&&(59)
&&&&&&Linaro&&(1)
&&&&&&Linux Kernel&&(2)
&&&&&&MCU SoC IP-Core&&(11)
&&&&&&&&&ARM&&(4)
&&&&&&&&&NEC&&(2)
&&&&&&PLC&&(38)
&&&&&&Symbology_Barcode&&(6)
&&&&&&Thread&&(2)
&&&&&&Uboot&&(17)
&&&EncryptDecrypt&&(1)
&&&Hardware&&(13)
&&&&&&Opensource Hardware&&(10)
&&&&&&&&&pcDuino&&(7)
&&&IDE TextEditor&&(87)
&&&&&&Apatana Studio 3&&(2)
&&&&&&ATOM&&(4)
&&&&&&Eclipse&&(37)
&&&&&&Notepad++&&(5)
&&&&&&SciTE&&(1)
&&&&&&Source Insight&&(7)
&&&&&&Sublime Text&&(6)
&&&&&&Visual Studio&&(4)
&&&&&&Xcode&&(20)
&&&&&&&&&Instruments&&(1)
&&&&&&&&&iOS Simulator&&(1)
&&&Network&&(7)
&&&&&&SIP&&(1)
&&&&&&Wireshark&&(3)
&&&OS_Platform&&(583)
&&&&&&CentOS&&(4)
&&&&&&Linux&&(146)
&&&&&&&&&diff&&(4)
&&&&&&&&&Driver&&(36)
&&&&&&&&&gcc&&(1)
&&&&&&&&&makefile&&(13)
&&&&&&&&&NFS&&(2)
&&&&&&&&&patch&&(3)
&&&&&&&&&Wireless&&(7)
&&&&&&Mac&&(35)
&&&&&&&&&Cocoa&&(1)
&&&&&&&&&iphone&&(1)
&&&&&&MobilePlatform&&(351)
&&&&&&&&&Android&&(266)
&&&&&&&&&&&&Android Studio&&(14)
&&&&&&&&&&&&Osmand&&(5)
&&&&&&&&&iOS&&(85)
&&&&&&&&&&&&Swift&&(35)
&&&&&&Ubuntu&&(38)
&&&&&&Windows&&(9)
&&&pneumatic&&(1)
&&&ProgrammingLanguage&&(737)
&&&&&&C&&(48)
&&&&&&C#&&(161)
&&&&&&GO&&(47)
&&&&&&Java&&(48)
&&&&&&&&&JSP&&(1)
&&&&&&&&&Openfire&&(10)
&&&&&&&&&Spark&&(1)
&&&&&&Object-C&&(4)
&&&&&&Perl&&(4)
&&&&&&PHP&&(151)
&&&&&&&&&Drupal&&(16)
&&&&&&&&&Joomla&&(4)
&&&&&&&&&MediaWiki&&(4)
&&&&&&&&&WordPress&&(90)
&&&&&&Python&&(253)
&&&&&&&&&BeautifulSoup&&(11)
&&&&&&&&&Django&&(7)
&&&&&&&&&Python GUI&&(3)
&&&&&&&&&Python IDE&&(14)
&&&&&&&&&Python3&&(8)
&&&&&&&&&StringEncoding&&(16)
&&&&&&R&&(5)
&&&&&&VB.Net&&(5)
&&&&&&VBA&&(11)
&&&RegularExpression&&(54)
&&&&&&Android regex&&(3)
&&&&&&C# Regex&&(1)
&&&&&&dreamweaver regex&&(1)
&&&&&&EditPlus TR1&&(1)
&&&&&&Java regex&&(6)
&&&&&&Notepad++ regex&&(1)
&&&&&&Perl //&&(1)
&&&&&&PHP preg_match&&(1)
&&&&&&Python re&&(30)
&&&&&&UltraEdit 3 type regex&&(1)
&&&&&&VB.NET Regex&&(1)
&&&Soft Dev Basics&&(19)
&&&TechMaterialDownload&&(27)
&&&technical_fun&&(2)
&&&TechnicalLife&&(20)
&&&tmp_todo&&(103)
&&&Virtual Machine&&(78)
&&&&&&VirtualBox&&(42)
&&&&&&VMWare&&(29)
&&&Web_Technology&&(343)
&&&&&&BBS&&(8)
&&&&&&Crawl_EmulateLogin&&(75)
&&&&&&&&&Amazon&&(29)
&&&&&&&&&eBay&&(9)
&&&&&&&&&Scrapy&&(6)
&&&&&&&&&Taobao&&(1)
&&&&&&CSS&&(6)
&&&&&&Google&&(32)
&&&&&&&&&Google Adsense&&(28)
&&&&&&HTML&&(5)
&&&&&&JavaScript&&(24)
&&&&&&&&&easyUI&&(2)
&&&&&&&&&KindEditor&&(3)
&&&&&&&&&Node.js&&(10)
&&&&&&JSON&&(22)
&&&&&&MySQL&&(3)
&&&&&&Skydrive&&(5)
&&&&&&swf flash&&(1)
&&&&&&Tencent&&(1)
&&&&&&UML&&(2)
&&&&&&VirtualHost&&(68)
&&&&&&&&&cPanel&&(3)
&&&&&&&&&hawk&&(11)
&&&&&&&&&sugarhosts&&(7)
&&&&&&&&&TransferWebHosting&&(16)
&&&&&&WebServer&&(5)
&&&&&&&&&apache&&(4)
&&&&&&&&&nginx&&(1)
&&&&&&WeiXin&&(5)
&&&&&&WLW&&(24)
&&&&&&XML&&(3)
&&&&&&&&&XPath&&(2)
&&&wiki&&(2)
&&&经验和教训&&(9)
无法写入&&(1)
有意义&&(637)
&&&值得看的东东&&(138)
&&&新闻与社会&&(196)
&&&日本&&(13)
&&&看图不说话&&(113)
&&&罗永浩[老罗]&&(18)
有趣&&(850)
&&&多收了三五斗&&(21)
&&&开心西游记&&(43)
&&&笑话幽默&&(106)
&&&脑筋急转弯&&(19)
&&&视频&&(22)
&&&超强男女经典征婚启事&&(9)
生活&&(1,433)
&&&Tmp&&(9)
&&&个人推荐&&(84)
&&&信息记录&&(4)
&&&历史&&(3)
&&&安徽&&(12)
&&&心情与思考&&(65)
&&&文学&&(13)
&&&旅游&&(23)
&&&楼市与住房&&(308)
&&&&&&日常生活&&(3)
&&&&&&海德公园&&(39)
&&&&&&装修&&(223)
&&&&&&&&&卫浴&&(1)
&&&&&&&&&吊顶&&(1)
&&&&&&&&&地暖&&(50)
&&&&&&&&&地板&&(2)
&&&&&&&&&家电商场&&(1)
&&&&&&&&&封阳台&&(1)
&&&&&&&&&建材市场&&(9)
&&&&&&&&&整体橱柜&&(8)
&&&&&&&&&瓷砖&&(6)
&&&&&&&&&&&&木纹砖&&(3)
&&&&&&&&&空调&&(1)
&&&&&&&&&衣柜&&(1)
&&&&&&&&&装修日记&&(117)
&&&&&&&&&门&&(2)
&&&淮安&&(3)
&&&游戏&&(14)
&&&电影&&(1)
&&&电脑+数码+软件&&(598)
&&&&&&数码电玩&&(165)
&&&&&&&&&I9100G&&(71)
&&&&&&&&&U盘量产&&(3)
&&&&&&&&&华为手机&&(21)
&&&&&&&&&安卓手机&&(5)
&&&&&&&&&老人机&&(1)
&&&&&&电信&&(2)
&&&&&&电脑_生活&&(9)
&&&&&&电脑知识&&(80)
&&&&&&笔记类软件&&(4)
&&&&&&&&&为知笔记&&(1)
&&&&&&&&&印象笔记&&(2)
&&&&&&系统使用&&(111)
&&&&&&&&&Mac系统&&(34)
&&&&&&&&&Windows系统&&(77)
&&&&&&&&&&&&win10&&(5)
&&&&&&网上银行&&(27)
&&&&&&&&&PayPal&&(1)
&&&&&&&&&中行BOC&&(13)
&&&&&&&&&华夏hxb&&(1)
&&&&&&&&&工行ICBC&&(5)
&&&&&&&&&招行&&(1)
&&&&&&&&&支付宝&&(3)
&&&&&&路由器&&(7)
&&&&&&软件使用&&(168)
&&&&&&&&&360&&(2)
&&&&&&&&&chrome&&(3)
&&&&&&&&&Excel&&(8)
&&&&&&&&&Firefox&&(17)
&&&&&&&&&Flash Player&&(2)
&&&&&&&&&google&&(6)
&&&&&&&&&&&&goagent&&(4)
&&&&&&&&&IE&&(1)
&&&&&&&&&Office&&(3)
&&&&&&&&&Outlook&&(5)
&&&&&&&&&PDF&&(2)
&&&&&&&&&PicPick&&(1)
&&&&&&&&&PowerPoint&&(1)
&&&&&&&&&QQ&&(14)
&&&&&&&&&shadowsocks&&(3)
&&&&&&&&&Thunderbird&&(14)
&&&&&&&&&Word&&(13)
&&&&&&&&&网易163&&(2)
&&&&&&&&&翻墙&&(9)
&&&经济&&(15)
&&&网上购物&&(17)
&&&美食&&(8)
&&&羽毛球&&(22)
&&&苏州&&(57)
&&&&&&工业园区&&(2)
&&&&&&&&&独墅湖高教区&&(2)
知道&&(180)
&&&English&&(60)
&&&生活百科&&(23)
&&&网络资源下载&&(45)
移动硬盘&&(1)
笔记本相关&&(533)
&&&买本前必看&&(33)
&&&无线和迅驰及其相关&&(10)
&&&电脑知识扫盲&&(12)
&&&神舟资料整理&&(342)
&&&&&&别人对神舟的无端诋毁&&(7)
&&&&&&某些笔记本价钱贵但毛病也不少&&(24)
&&&&&&神舟本网站评测&&(7)
&&&&&&神舟电脑评测&&(151)
&&&&&&神舟相关&&(103)
&&&&&&神舟笔记本好的方面的例子&&(17)
&&&&&&给不熟悉的人的解答&&(26)
&&&笔记本cpu&&(26)
&&&笔记本显卡&&(36)
&&&笔记本显卡游戏效果&&(27)
&&&走出笔记本使用误区&&(6)
&&&走出笔记本购买的误区&&(14)
&&&降频功耗散热&&(11)
音乐天堂&&(526)
&&&歌曲类型&&(437)
&&&&&&Hiphop_R&B_Rock&&(23)
&&&&&&中文歌曲&&(160)
&&&&&&外文歌曲&&(200)
&&&&&&纯音乐&无歌词&&(54)
&&&特定歌手&&(38)
&&&&&&Enigma&&(11)
&&&&&&Linkinpark&&(14)
&&&&&&陈琳&&(13)
&&&音乐下载&&(1)
&&&音乐知识&&(9)
默认分类&&(212)
&&&默认分类&&(3)
2016年三月
78910111213
14151617181920
21222324252627
免费的格式化Javascript源码的网站
查询Unicode字符，且还带Oct,Decimal,Hex,HTML Entity
HTML和Javascript都支持，很好用。当前位置：
> > 查看文章
今天给大家推荐一款我正在上使用的网页截图插件，插件的名字就叫“网页截图:注释&批注”，是由发布的, 目前已经有1,027,308 位用户。
这款插件直接三种截图方式：第一种就是截取可视部份，也就是截取网页的一个屏幕。第二种方式是截取选择部份，可以截取网页的任意部份，甚至在选取区域的时候，可以自动滚动屏幕。第三种方式是截取整个页面，即使某个网站有好几屏的高度，也可以被完整地截取，例如下面这幅，就是截取的腾讯的页面。这也是这款截图插件的特点。
截取以后，保存之前可以进行一些修饰，例如画一些形状，矩形，圆形，箭头，线条和文字，也可以在上面用类似铅笔的工具随手涂丫， 对一些敏感内容进行模糊，一键上传分享注释。支持保存成PNG格式的图片。
再看看用户是怎么说的：
Oliver Dein日
由于Google自家的网页截图扩展在一些页面里不能用才用这个。这个扩展暂时没失效过，但图片只能保存为PNG格式，即使把图片的后缀名改成 “.JPG” ，但最后保存的图片实际格式还是PNG。
A Google User日
功能非常棒!! 唯一的小遺憾就是文字輸入的部分，字體真的太小了，如果可以將文字的大小調大，就更棒了！^
A Google User日
下個版本如再增加”截取整個網頁”功能的話，
那這將是目前網路上所有截圖外掛中最強的一個外掛了！
希望下個版本趕快到來！！超級期待~~~
有兴趣的朋友可以到google chrome应用商店下载这款插件，下面是下载链接：
版权信息：>>本文链接： 转载请注明出处.如果喜欢：Chrome浏览器网页截全屏算法以及实现 - 推酷
Chrome浏览器网页截全屏算法以及实现
做个一个简单的批量下载插件叫“挖一下”， 正如插件的名字一样，采集网页里面的所有图片，根据筛选条件过滤不需要的图片，最后下载选中的图片。
索性把网页也一起给截了，截屏分两种：
1.可见内容截屏
2.完整网页截屏（包括可见和不可见）
可见内容截屏：
实现原理：直接通过chrome自带的
方法(chrome.tabs.captureVisibleTab)，回调函数返回图片类型和
chrome.tabs.captureVisibleTab({format:'png'}, function(screenshotUrl) {
// 保存screenshotUrl， image信息，默认使用png格式
完整网页截屏
实现原理：因为chrome本身没有提供类似的截全屏的接口,或者不知道；于是找了很多方法，最终使用的方法就是自动滚动网页，然后一屏一屏的截（还是chrome.tabs.captureVisibleTab），并将这些小的截屏数据保存到缓存，通过canvas来合并。步骤如下：
（1）根据当前网页的scrollWidth和scrollHeight以及可视区域的clientWidth和clientHeight来计算最后需要截屏几次, 将网页整个网页拆分成多个截屏数据块。截屏代码如下：
var scrollWidth = document.body.scrollW
var scrollHeight = document.body.scrollH
var visibleWidth = document.documentElement.clientW
var visibleHeight = document.documentElement.clientH
// 根据可视区域计算整个网页可以拆分成多少行多少列
var columns = Math.ceil(scrollWidth*1.0 / visibleWidth);
var rows = Math.ceil(scrollHeight*1.0 / visibleHeight);
var canvas_data = {
size: {full_width: scrollWidth, full_height: scrollHeight, page_width: visibleWidth, page_height:visibleHeight},
table:{rows: rows, colums: columns},
screenshots: []
// 最后一行行的循环滚动页面截屏
for(var r=0; r& r++) {
document.body.scrollHeight = r*visibleH
for(var c=0; c& c++) {
document.body.scrollLeft = c*visibleW
// 截屏并保存
chrome.tabs.captureVisibleTab({format:'png'}, function(screenshotUrl) {
canvas_data.screenshots.push({row: r, column: c, data_url: screenshotUrl});
（2）通过canvas合并图像。
截屏之后得到一个截屏数组，数组的每一个元素都带有一个行号和列号，代表这个图像是网页的第几行第几列的图小。
当前网页的scrollWidth和scrollHeight创建一个canvas，根据元素信息以及以及可视区域的clientWidth和clientHeight，将图片一张张画到canvas。
function merge_images(canvas_data, image_element) {
// initialize canvas
var canvas = document.createElement(&canvas&);
canvas.width = canvas.size.full_
canvas.height = canvas.size.full_
draw_image(canvas, canvas_data, 0, image_element);
function draw_image(canvas, canvas_data, n, image_element) {
var screenshots = canvas_data.
if(n &= screenshots.length ) {
// draw completed
image_element.src = canvas.toDataURL('image/png');
console.log('draw '+n+' image');
var draw_context = canvas.getContext(&2d&);
var s = screenshots[n];
var row = s.
var column = s.
var x=0, y=0;
if(row & canvas_data.table.rows-1) {
y = row*canvas_data.size.page_
} else { // last row
y = canvas.height - canvas_data.size.page_
if(column & canvas_data.table.columns-1) {
x = column*canvas_data.size.page_
} else { // last column
x = canvas.width - canvas_data.size.page_
console.log('x:' + x + ', y=' + y);
var memory_image = new Image();
memory_image.onload =
(function(ctx, m, l, t) {
return function() {
console.log('image load ok');
ctx.drawImage(m,l,t);
draw_image(canvas, canvas_data, ++n, image_element);
})(draw_context, memory_image, x, y);
memory_image.src = s.data_
当canvas画图结束后，用img元素显示图像，代码如下：
image_element.src = canvas.toDataURL('image/png');
到此ok了，折腾好几天了，
插件源码地址：http://git.oschina.net/iknown/wayixia-chrome-extension
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示