用 JavaScript 截图

使用 JavaScript 截图，这里我要推荐两款开源组件：一个是 Canvas2Image，它可以将 Canvas 绘图编程 PNG/JPEG/BMP 的图像；但是光有它还不够，我们需要给任意 DOM（至少是绝大部分）截图，这就需要 html2canvas，它可以将 DOM 对象转换成一个 canvas 对象。两者的功能结合起来，就可以把页面上的 DOM 截图成 PNG 或者 JPEG 图像了，很酷。

Canvas2Image

它的原理是利用了 HTML5 的 canvas 对象提供了 toDataURL() 的 API：

var strDataURI = oCanvas.toDataURL();  
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

这样的结果是 base64 编码的（事实上，image 也可以通过这种方式以字符串的形式写死到页面上），所以我们还需要一个 base64 编解码的 lib。

但是目前的缺陷也有不少，比如目前 Opera 和 Safari 只支持 PNG，FireFox 的支持性则好得多。

生成图片有两种方式写入页面，一种是生成一个图片对象写入页面 DOM 树中，这也是支持性比较好的方式：

// returns an <img> element containing the converted PNG image  
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);     

但是如果你做一个 JavaScript 截图功能的话，你可能希望截图后能够自动打开保存文件的 “保存” 对话框：

Canvas2Image.saveAsPNG(oCanvas);
// will prompt the user to save the image as PNG.  

这个方式调用会生成一个 mimeType 为 “image/octet-stream” 的数据流到浏览器，但是 “保存” 对话框无法识别出图片适当的后缀名，默认保存的文件在 FireFox 下是 “xxx.part” 这种名字，这是令人遗憾的地方，但是似乎没有什么好办法解决。

html2canvas

它作用于 DOM 加载的过程，收集其中的信息，再来绘制 canvas 图像，也就是说，其实它并不是将展现的 DOM 树截成 canvas 图，而是仿照 DOM 树重新绘制了一张 canvas 图。于是很多 CSS 样式都无法被准确识别出来，无法准确反映到图上。

其它的限制还有不少，比如：

• javascript 必须是同域的，对于跨域的情况需要使用代理服务器（API 中有参数可以指定），对于 image 也同样；
• frame 内的 DOM 树无法被准确绘制；
• 因为要绘制的是 canvas 图，所以像 IE8 这样的浏览器需要使用 FlashCanvas 这样的第三方库。

这个页面可以测试各个网站使用它来截图的效果，效果相当不错：

API 使用的例子：

html2canvas(
    [dom1, dom2],
    {
        logging: false,
        useCORS: false,
        proxy:   false,
        onrendered: function(canvas){
            // canvas 就是绘制的 canvas 是对象
        }
    }
);

对于这一类相对小众的类库，文档都是很差的，包括 API 的定义，需要阅读源码，代码上写得挺清楚的。

另外，该站点下载包里面还有一个 JQuery 的插件，对这个 API 做了一个封装，可以无视。

文章未经特殊标明皆为本人原创，未经许可不得用于任何商业用途，转载请保持完整性并注明来源链接 《四火的唠叨》

×Scan to share with WeChat