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" 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" >' + '<em>i</em> like ' + '<span >' + '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" 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" >' + 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转换出来的图片。
以上就是怎么用javascript实现截屏功能的详细内容。