这篇文章主要讲解了“怎么用JavaScript实现截屏功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”怎么用JavaScript实现截屏功能”吧!
1. blob的媒体类型必须是“<代码>图像/svg + xml ,
2。需要一个svg元素
3。在svg元素里面插入一个<代码>,foreignObject 元素
4。在foreignObject元素里面放入符合规范的html
把dom转成画布就这么简单,就上面几个步骤。下面是文档给出的一上简单的演示:
& lt; ! doctype html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> Document
& lt;/head>
& lt; body>
& lt; canvas id=癱anvas",,宽度=?00“,身高=?00“比;
& lt;/canvas>
& lt; script>
,var canvas =, . getelementbyid(& # 39;帆布# 39;);
,var ctx =, canvas.getContext (& # 39; 2 d # 39;);
,var data =, & # 39; & lt; svg xmlns=癶ttp://www.w3.org/2000/svg",宽度=?00“,身高=?00“祝辞& # 39;+
& # 39;才能& lt; foreignObject 宽度=?00%“,身高=?00%“祝辞& # 39;+
& # 39;才能& lt; div xmlns=癶ttp://www.w3.org/1999/xhtml",祝辞& # 39;+
& # 39;才能& lt; em> I, like & # 39; +
& # 39;才能& lt; span 祝辞& # 39;+
& # 39;才能cheese & # 39; +
& # 39;才能& lt;/div> & # 39; +
& # 39;才能& lt;/foreignObject> & # 39; +
& # 39;才能& lt;/svg> & # 39;;
,var DOMURL =, window.URL | |, window.webkitURL | |,窗口;
,var img =, new 图像();
,var svg =, new Blob((数据),{类型:& # 39;图像/svg + xml # 39;});
,var url =, DOMURL.createObjectURL (svg);=,img.onload 函数(),{
ctx.drawImage才能(img, 0, 0);
DOMURL.revokeObjectURL才能(url);
,}
url=, img.src ;
& lt;/script>
& lt;/body>
& lt;/html> 复制代码,运行一下,哇,帅呆了,浏览器上出现了超酷的两行艺术字呢!
嗯,原dom来转成画布这么简单啊?那我通过,<代码> document.body.innerHTML 把身体里面的所有dom取出来,然后放到foreignObject元素里面,不就好了,把整个页面都截取下来了吗?
演示仅仅是个Hello World,但是实际项目中dom的结构比这个复杂多了,比如,引入了外部样式表,图片,而且还可能某些标签不符合xml规范(如缺少闭合标签等)。下面的举个简单的例子,.container不是使用行内样式的,而是在风格标签里面定义,字体红色,转成图片后,样式不生效。
& lt; ! doctype html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> Document
,& lt; style>
.container {才能
,,,颜色:红色;
,,}
,& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=癱ontainer",比;
,Hello 世界!
& lt;/div>
& lt; canvas id=癱anvas",,宽度=200“,身高=?00“比;
& lt;/canvas>
& lt; script>
,var canvas =, . getelementbyid(& # 39;帆布# 39;);
,var ctx =, canvas.getContext (& # 39; 2 d # 39;);
,var data =, & # 39; & lt; svg xmlns=癶ttp://www.w3.org/2000/svg",宽度=?00“,身高=?00“祝辞& # 39;+
& # 39;才能& lt; foreignObject 宽度=?00%“,身高=?00%“祝辞& # 39;+
& # 39;才能& lt; div xmlns=癶ttp://www.w3.org/1999/xhtml",祝辞& # 39;+
document.querySelector才能(& # 39;.container& # 39;) .innerHTML +
& # 39;才能& lt;/div> & # 39; +
& # 39;才能& lt;/foreignObject> & # 39; +
& # 39;才能& lt;/svg> & # 39;;
,var DOMURL =, window.URL | |, window.webkitURL | |,窗口;
,var img =, new 图像();
,var svg =, new Blob((数据),{类型:& # 39;图像/svg + xml # 39;});
,var url =, DOMURL.createObjectURL (svg);=,img.onload 函数(),{
ctx.drawImage才能(img, 0, 0);
DOMURL.revokeObjectURL才能(url);
,}
url=, img.src ;
& lt;/script>
& lt;/body>
& lt;/html> 既然外部样式不生效,那我们可以通过JS遍历所有的dom元素,把全部的样式通过元素。风格对象添加到行内样式啊。这个思路听起来不错,但是,实现这个把外部样式转成行内样式的函数我还真写不出来啊。需求比较紧,也没有那多时间去瞎折腾了,所以,就想找找有没有现成的库。于是又去谷歌一下。很幸运,一下子就搜到了一个叫做html2canvas的库,非常棒的一个库,很强大,但用法非常简单。就这么简单的方法,就可以把我的整个页面截图下来了:
