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

之前我曾写过如何将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 * .;

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网页截屏的方法的更多相关文章

  1. PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

  2. 利用PhantomJS进行网页截屏，完美解决截取高度的问题

    关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...

  3. 利用PhantomJS进行网页截屏

    利用PhantomJS进行网页截屏 关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种W ...

  4. php结合phantomjs实现网页截屏、抓取js渲染的页面

    首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...

  5. html转图片网页截屏（二）PhantomJS

    关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...

  6. Java实现网页截屏功能（基于phantomJs）

    公司最近有个需求:把用户第一次的测量身体信息和最近一次测量信息进行对比,并且需要把对比的数据截成图片可以发给用户(需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上,返回图片地址),通过网上 ...

  7. 使用PHANTOMJS对网页截屏

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

  8. Python 实现网页截屏、查库、发邮件

    本文介绍了使用 Python(2.7版本)实现网页截屏.查库.发邮件的 demo.用到了 selenium.phantomjs.mailer.jinja2.mysqldb 还有 image,都是比较典 ...

  9. JAVA之网页截屏

    先吐槽一下下: 表示接近两个月没有敲代码了,现在看一下代码都感觉有点生了.三天打鱼两天晒网是不行的,再说我本来就有“健忘症”,真的是木有办法啊￣へ￣.我一直信奉一句话:“勤能补拙”,它也是我学习路上的 ...

随机推荐

  1. AS3.0 Vector的运用

    使用Vector类编程 一个array(数组)就像是把一套变量组织在一起的容器.单个数组可以含有许多不同的值.你可以储存和取得数组中的单个值(也就是数组elements(元素)).你也可以通过直接操作 ...

  2. 事务内执行sql修复的简易模板

    -- ============================================= -- Script Template -- ============================= ...

  3. Windows系统下将目录挂载为一个磁盘并分配盘符

    Windows系统下subst可以临时将目录分配一个盘符. 将路径与驱动器号关联. SUBST [drive1: [drive2:]path]SUBST drive1: /D drive1: 指定要分 ...

  4. fiddler在ios10.3系统抓包https失败原因解决

    一直是按照以往的设置抓包,设置代理ip,通过Safari下载安装证书,抓包https怎么显示证书无效呢?难道证书被apple设为黑名单了?google后发现,IOS10.3以后,安装了证书不是默认启用 ...

  5. Django 工作流程

    一.Django 工作流程 在开始具体的代码之旅前,先来宏观地看下Django是如何处理Http Resquest的,如下图: 假设你已经在浏览器输入了 http://127.0.0.1:8000/p ...

  6. Solidworks如何添加齿轮

    打开ToolBox,找到GB,动力传动,齿轮,正齿轮,然后拖放到绘图窗口(切记要在装配图里面弄,不是在单个零件里面弄)   设置齿轮的参数,一般只需要设置模数,齿数,面宽,类型,总长度(面宽就是有齿轮 ...

  7. atitit.微信支付的教程文档 attilax总结

    atitit.微信支付的教程文档 attilax总结 1. 支付流程概览 1 2. 设置支付起始文件夹   host/app/paydir/ 1 3. 设置oauth验证域名 1 4. 測试文件夹 能 ...

  8. 探寻C++最快的读取文件的方案

    https://www.byvoid.com/blog/fast-readfile/ 在竞赛中,遇到大数据时,往往读文件成了程序运行速度的瓶颈,需要更快的读取方式.相信几乎所有的C++学习者都在cin ...

  9. 【转】maven常见问题问答

    转自:http://www.iteye.com/topic/973166 前言 Maven,发音是[`meivin],"专家"的意思.它是一个很好的项目管理工具,很早就进入了我的必 ...

  10. 算法笔记_092:蓝桥杯练习 c++_ch04_02_修正版（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 [题目描述] 实现一个时间类Time.将小时,分钟和秒存储为int型成员变量.要求该类中包含一个构造函数,访问用的函数,一个推进当前时间的函数adv ...