JavaScript实现网页截图功能


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

Canvas2Image

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

FlashCanvas这样的第三方库。

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

API使用的例子:

复制代码 代码如下:

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

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

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


« 
» 

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3