JavaScript截屏功能的实现代码
最近参与了网易炉石盒子的相关页面开发，在做卡组分享页（地址：炉石盒子卡组分享），有个需求：用户可以把这个卡组以图片的形式分享给好友。最初的的做法是使用服务器把该页面转换成图片，然后把图片地址返回给前端。嗯，这样也挺好的啊，而且服务器还可以对转换出来的图片进行缓存，下次请求可以直接返回图片地址了。原理上是毫无毛病的。然而，问题来了，后台转换的图片和页面内容偶尔不一致，有时候会少了一一些内容，pm姐姐就很不爽了，说这个问题一定要解决。反正页面转成图片的接口是后台做的，关我luan事啊！就在暗暗自喜的时候，悲催的事情发生的，后台的同事说，因为页面里面有些内容是异步加载出来的（比如底部的二维码是通过canvas生成的）,服务器转换不稳定，有时候对异步渲染的内容无法截取。说白了，就是这问题他没有办法解决，前端去改吧，谁叫前端用了异步渲染呢？最后leader让我尝试能不能直接用js进行截图了，这样既可以减轻服务器的压力，又可以解决上面bug。
一开始，我觉得使用js截图的想法是非常荒谬的（怪我无知咯，前端这几年发展的实在太快了）：首先js没有权限调用操作系统的截图功能，其次，浏览器（bom）也没有提供相关的截图接口。我该怎么办呢、怎么办呢？有事找google啊。然后搜索了一下： js html to png ,然后来到就找到了这里：render-html-to-an-image。开始有思路了，回答中有人提到可以把dom转成canvas，嗯！又是canvas！我不由得兴奋起来，真的是山重水复疑无路，柳暗花明又一村啊！然后再搜索一下 dom to canvas，来到了大家熟知的mdn的文档drawing_dom_objects_into_a_canvas。然后就开始认（zhuang）真(bi)的看文档。文档开头就说到，不可以把dom转成canvas，但是可以把dom转成svg，然后再把svg画到canvas里面去。也许有人会问，为什么要先把dom转成svg呢？这可能是因为svg使用xml表示、结构和dom一致吧。
下面就是官方文档的step by step的教程:
1.blob的媒体类型必须是"image/svg+xml"
2.需要一个 svg 元素
3.在 svg 元素里面插入一个 foreignobject 元素
4.在 foreignobject 元素里面放入符合规范的 html
把dom转成canvas就这么简单，就上面几个步骤。下面是文档给出的一上简单的demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<script>
var canvas = document.getelementbyid('canvas');
var ctx = canvas.getcontext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignobject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>i</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</span>' +
'</div>' +
'</foreignobject>' +
'</svg>';
var domurl = window.url || window.webkiturl || window;
var img = new image();
var svg = new blob([data], {type: 'image/svg+xml'});
var url = domurl.createobjecturl(svg);
img.onload = function() {
ctx.drawimage(img, 0, 0);
domurl.revokeobjecturl(url);
}
img.src = url;
</script>
</body>
</html>
复制代码，运行一下，哇，帅呆了，浏览器上出现了超酷的两行艺术字呢！
嗯，原来dom转成canvas这么简单啊？那我通过 document.body.innerhtml 把body里面的所有dom取出来，然后放到 foreignobject 元素里面，不就ok了、把整个页面都截取下来了吗？
demo仅仅是个hello world，但是实际项目中的dom结构比这个复杂多了，比如，引入了外部样式表、图片、而且还可能某些标签不符合xml规范（如缺少闭合标签等）。下面的举个简单的例子，.container不是使用行内样式的，而是在style标签里面定义，字体红色，转成图片后，样式不生效。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
.container {
color: red;
}
</style>
</head>
<body>
<div class="container" >
hello world!
</div>
<canvas id="canvas" style="border:2px solid black;" width=200" height="200">
</canvas>
<script>
var canvas = document.getelementbyid('canvas');
var ctx = canvas.getcontext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignobject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
document.queryselector('.container').innerhtml +
'</div>' +
'</foreignobject>' +
'</svg>';
var domurl = window.url || window.webkiturl || window;
var img = new image();
var svg = new blob([data], {type: 'image/svg+xml'});
var url = domurl.createobjecturl(svg);
img.onload = function() {
ctx.drawimage(img, 0, 0);
domurl.revokeobjecturl(url);
}
img.src = url;
</script>
</body>
</html>
既然外部样式不生效，那我们可以通过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转换出来的图片。长得一模一样，毫无毛病哈。
关于js页面截图的就写到这里啦，因为也只刚刚接触，很多东西也理解得不到位，欢迎各大神指点。后面会深入学习一下html2canvas的源码，进一步理解dom to canvas的原理。
总结
以上所述是小编给大家介绍的javascript截屏功能的实现代码，希望对大家有所帮助