个人中心
gpt4 book ai didi

JavaScript实现网页截图功能

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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这样的第三方库.

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

JavaScript实现网页截图功能

API使用的例子:

  。

复制代码 代码如下:

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

  。

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

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

最后此篇关于JavaScript实现网页截图功能的文章就讲到这里了,如果你想了解更多关于JavaScript实现网页截图功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 和平精英黄金岛怎么启动矿机 黄金岛矿机启动方法
文章推荐： 深度分析正则(pcre)最大回溯/递归限制
文章推荐： 和平精英黄金岛怎么获得胜利 黄金岛胜利方法详解
文章推荐： 小议正则表达式效率 贪婪、非贪婪与回溯
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com