Javascript网页截屏的方法

标签: 技术技巧 addon canvas html5 javascript | 发表时间:2014-06-27 02:42 | 作者:歪脖骇客
出处:http://www.webhek.com

最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上。目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果。

之前我曾写过 如何将canvas图形转换成图片下载canvas图像的方法,这些都是在为这个插件做技术准备。

技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容转换成图片,保存到本地,最后上传到微博。

我在网上搜寻到 html2canvas这个能将指定网页元素内容生成canvas图像的javascript工具。这个js工具的用法很简单,你只需要将它的js文件引入到页面里,然后调用 html2canvas()函数:

html2canvas(document.body, {
    onrendered: function(canvas) {
        /* canvas is the actual canvas element,
           to append it to the page call for example
           document.body.appendChild( canvas );
        */
    }
});

这个 html2canvas()函数有个参数,上面的例子里传入的参数是 document.body,这会截取整个页面的图像。如果你想只截取一个区域,比如对某个 div或某个 table截图,你就将这个 div或某个 table当做参数传进去。

我最终并没有选用html2canvas这个js工具,因为在我的实验过程中发现它有几个问题。

首先,跨域问题。我举个例子说明这个问题,比如我的网页网址是http://www.webhek.com/about/,而我在这个页面上有个张图片,这个图片并不是来自www.webhek.com域,而是来自CDN图片服务器www.webhek-cdn.com/images/about.jpg,那么,这张图片就和这个网页不是同域,那么html2canvas就无法对这种图片进行截图,如果你的网站的所有图片都放在单独的图片服务器上,那么用html2canvas对整个网页进行截图是就会发现所有图片的地方都是空白。

这个问题也有补救的方法,就是用代理:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html2canvas php proxy</title>
        <script src="html2canvas.js"></script>
        <script>
        //<![CDATA[
        (function() {
            window.onload = function(){
                html2canvas(document.body, {
                    "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                    "proxy":"html2canvasproxy.php",
                    "onrendered": function(canvas) {
                        var img = new Image();
                        img.onload = function() {
                            img.onload = null;
                            document.body.appendChild(img);
                        };
                        img.onerror = function() {
                            img.onerror = null;
                            if(window.console.log) {
                                window.console.log("Not loaded image from canvas.toDataURL");
                            } else {
                                alert("Not loaded image from canvas.toDataURL");
                            }
                        };
                        img.src = canvas.toDataURL("image/png");
                    }
                });
            };
        })();
        //]]>
        </script>
    </head>
    <body>
        <p>
            <img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false">
        </p>
    </body>
</html>

这个方法只能用在你自己的服务器里,如果是对别人的网页截图,还是不行。

试验的过程中还发现用html2canvas截屏出来的图像有时会出现文字重叠的现象。我估计是因为html2canvas在解析页面内容、处理css时不是很完美的原因。

最后,我在火狐浏览器的官方网站上找到了 drawWindow()这个方法,这个方法和上面提到html2canvas不同之处在于,它不分析页面元素,它只针对区域,也就是说,它接受的参数是四个数字标志的区域,不论这个区域中什么地方,有没有页面内容。

void drawWindow(
  in nsIDOMWindow window,
  in float x, 
  in float y,
  in float w,
  in float h,
  in DOMString bgColor,
  in unsigned long flags [optional]
);

这个原生的JavaScript方法看起来非常的完美,正是我需要的,但这个方法不能使用在普通网页中,因为火狐官方发现这个方法会引起有 安全漏洞,在这个bug修复之前,只有具有“Chrome privileges”的代码才能使用这个 drawWindow()函数。

虽然有很大的限制,但周折一下还是可以用的,在我开发的火狐addon插件中,main.js就是具有“Chrome privileges”的代码。我在网上发现了一段火狐插件SDK里自带 代码样例

var window = require('window/utils').getMostRecentBrowserWindow();
var tab = require('tabs/utils').getActiveTab(window);
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
thumbnail.mozOpaque = true;
window = tab.linkedBrowser.contentWindow;
thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);
var aspectRatio = 0.5625; // 16:9
thumbnail.height = Math.round(thumbnail.width * aspectRatio);
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.innerWidth * .6;
var scale = thumbnail.width / snippetWidth;
ctx.scale(scale, scale);
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
// thumbnail now represents a thumbnail of the tab

这段代码写的非常清楚,只需要依据它做稍微的修改就能适应自己的需求。

我是第一次接触火狐插件开发,是边学习,边研究,边开发。所以开发速度很慢,这个小小的插件用了整整一周才基本上达到能用的程度。你可以在 @程序师视野 微博里看到用它上传的图片效果还是不错的。

先能用,然后使用的过程中慢慢做改进,这是我的软件开发理念。

希望和对火狐插件有兴趣的朋友一起探讨、一起学习。

 

相关 [javascript 网页 方法] 推荐:

Javascript网页截屏的方法

- - WebHek
最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上. 目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果. 之前我曾写过 如何将canvas图形转换成图片和 下载canvas图像的方法,这些都是在为这个插件做技术准备. 技术路线很清晰,将网页的某个区域的内容生成图像,保持到canvas里,然后将canvas内容转换成图片,保存到本地,最后上传到微博.

Javascript抽取网页正文

- - 脚本爱好者
最近在开发http://www.sokers.com的时候需要抽取网页正文,在网上也看了很多算法,但效果感觉都不好,有的根本打不开无法看到效果,于是自己就试着写了一个,效果还不错,支持图片和Flash,不仅仅能抽取文字. 方法就是适用打分机制,把正文文字和标签的比例、标点符号、换行等因素累加起来,打分最高的就是正文,当然肯定有识别不出来的,这个是任何算法都无法避免的.

javascript封装addClass()方法

- - 收集分享互联网资源!
//获取obj标签对象的class. //如果oClass为空则直接赋newClass. //1、判断当前标签里是否含有newClass,如果含有newClass则return跳出不赋值,避免反复赋同样的newClass. //2、如果不含有newClass,则在原来oClass的基础上添加新的newClass.

学习JavaScript的最佳方法

- 黄立 - 译言-每日精品译文推荐
学习JavaScript的最佳方法. Andrew Burgess 2011年9月21日. You don’t have to worry about finding the best resources, sorting out the bad ones, and figuring out what to learn next.

Javascript定义类(class)的三种方法

- - 阮一峰的网络日志
将近20年前, Javascript诞生的时候,只是一种简单的网页脚本语言. 如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到 后端,有着各种 匪夷所思的用途. 程序员用它完成越来越庞大的项目. Javascript代码的复杂度也直线上升. 单个网页包含10000行Javascript代码,早就司空见惯.

Javascript异步编程的4种方法

- - 阮一峰的网络日志
你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务. 如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.

JavaScript 方法的4种调用模式

- - Harttle Land
函数(Function)是JavaScript的基本模块单元,JavaScript的代码重用, 信息隐藏,对象组合等都可以借助函数来实现. JavaScript中的函数有4种调用模式:. 方法调用(Method Invocation Pattern). 函数调用(Function Invocation Pattern).

Parse将推出Javascript SDK支持移动网页应用

- - CocoaChina移动观察
文/Kim-Mai Culter. 由美国知名创业孵化器Y Combinator支持的创业Parse曾为面向移动应用(如Band of the Day 和Hipmunk)提供后端支持,宣布将为移动网络应用提供支持. 这家位于旧金山的创业公司提供了面向JavaScript的SDK,实现更为方便的创建HTML5应用.

JavaScript解析:让搜索引擎看到更真实的网页

- - 搜索研发部官方博客
长期以来,站长们选择使用JavaScript来实现网页的动态行为,这样做的原因是多种多样的,如加快页面的响应速度、降低网站流量、隐藏链接或者嵌入广告等. 由于早期的搜索引擎没有相应的处理能力,导致在索引这类网页上往往出现问题,可能无法收录有价值的资源,也可能出现作弊. 引入JavaScript解析的目的,正是为了解决上述两方面的问题,其结果也就是使搜索引擎可以更为清晰的了解用户实际打开该网页时看到的效果.

iOS中UIWebView与其中网页的javascript的交互

- - ITeye博客
1.本地语言调js的方式与android中的方式类似,也是向WebView控件发送要调用的js语句. android和iOS对比,它们都用了伪url的技术,但android是在本地语言调js时使用了伪url(该url的schema为javascript),而iOS是js调本地语言时使用了伪url(该url是自定义的标识),这个错落很有意思.