怎么用JavaScript实现截屏功能

这篇文章主要讲解了"怎么用JavaScript实现截屏功能"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么用JavaScript实现截屏功能"吧！

1.Blob的媒体类型必须是"image/svg+xml"

2.需要一个 svg 元素

3.在 svg 元素里面插入一个 foreignObject 元素

4.在 foreignObject 元素里面放入符合规范的 html

把dom转成canvas就这么简单，就上面几个步骤。下面是文档给出的一上简单的demo：

复制代码，运行一下，哇，帅呆了，浏览器上出现了超酷的两行艺术字呢！

嗯，原来dom转成canvas这么简单啊？那我通过 document.body[xss_clean] 把body里面的所有dom取出来，然后放到 foreignObject 元素里面，不就OK了、把整个页面都截取下来了吗？

demo仅仅是个Hello World，但是实际项目中的Dom结构比这个复杂多了，比如，引入了外部样式表、图片、而且还可能某些标签不符合xml规范（如缺少闭合标签等）。下面的举个简单的例子，.container不是使用行内样式的，而是在style标签里面定义，字体红色，转成图片后，样式不生效。

   
 Hello World!

既然外部样式不生效，那我们可以通过JS遍历所有的dom元素，把全部的样式通过element.style对象添加到行内样式啊。这个思路听起来不错，但是，实现这个把外部样式转成行内样式的函数我还真写不出来啊。需求比较紧，也没有那 多时间去瞎折腾了，所以，就想找找有没有现成的库。于是又去google一下。很幸运， 一下子就搜到了一个叫做html2canvas的库，非常棒的一个库，很强大、但用法非常简单.就这么简单的方法，就可以把我的整个页面截图下来了：

function convertHtml2Canvas() {  html2canvas(document.body, {   allowTaint: false,   taintTest: true  }).then(function(canvas) {   document.body.appendChild(canvas);  }).catch(function(e) {   console.error('error', e);  }); }

目前还有一个问题，就是这种方法默认是把整个页面截取下来的（就是说，会以你的innerHeight和innerWidth为边界，会存在大量的空白），可是，我的卡组只是占了页面的一小部分，我只想要卡组的部分啊。其实已经有了canvas就好办了，我们可以对它进行处理啊。大概思路是：1.把上面得到的canvas对象转成Blob并放到一个img元素。然后再把img.src绘制到canvas里面。这时候调用canvas.drawImage方法就可以截取我们想要的内容了。下面的两个函数分别是把canvas转成image以及反过来把image转成canvas。

// Converts canvas to an image function convertCanvasToImage(canvas) {  var image = new Image();  image.src = canvas.toDataURL("image/png", 0.1);  return image; } // Converts image to canvas; returns new canvas element function convertImageToCanvas(image, startX, startY, width, height) {  var canvas = document.createElement("canvas");  canvas.width = width;  canvas.height = height;  canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);  return canvas; }

然后，再把我们上面的写的 convertHtml2Canvas 改成下面的：

function convertHtml2Canvas() {  html2canvas(document.body, {   allowTaint: false,   taintTest: true  }).then(function(canvas) {   var img = convertCanvasToImage(canvas);   document.body.appendChild(img);   img.onload = function() {    img.onload = null;    canvas = convertImageToCanvas(img, 0, 0, 384, 696);    img.src = convertCanvasToImage(canvas).src;    $(img).css({     display: 'block',     position: 'absolute',     top: 0,     left: 400 + 'px'    });   }  }).catch(function(e) {   console.error('error', e);  }); }

这时候就可以把它的页面的某部分内容进行截取下来了。效果如卡组分享测试页面。页面左边部分是DOM结构的，右边部分是则是使用html2canvas转换出来的图片。

感谢各位的阅读，以上就是"怎么用JavaScript实现截屏功能"的内容了，经过本文的学习后，相信大家对怎么用JavaScript实现截屏功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！