html 桌面截图,html2canvas屏幕截图

html2Canvas是 "脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，"附上详解地址：http://html2canvas.hertzen.com/documentation，github地址：https://github.com/niklasvh/html2canvas

html2canvas的兼容性如下图1.1：

图1.1

我是在react上使用html2canvas,用法如下：

html2canvas(document.body).then(function(canvas){document.body.appendChild(canvas);});这是官方给的用法，

实例如图1.2：

图1.2

获取DOM节点，通过toDataURL,获取base64链接，可以把链接赋值给创建的a标签下载，如图1.3所示

图1.3

添加点击事件，因为火狐浏览器和常规浏览器的点击事件不同，所以要增加判断浏览器和方法，如图1.4：

图1.4

因为IE浏览器不支持base64的下载方式，所以这里还要兼容IE,可以直接判断是否为IE，直接获取blob,然后保存，代码如图1.5所示：

图1.5

window.navigator.msSaveBlob(blob,name)在IE上可以直接保存下载，因为开始想的是base64转blob,然后赋值给a标签的href,虽然方法可行，也可以保存，但是图片显示文件系统损坏，所以就找到了上面的方法，直接转blob,在这里还要提一下关于base64转blob的方法，代码如图1.6：

图1.6

new Blob([放入base64链接])，url方法是将blob转成链接赋值给a标签下载，再次提醒一点，如果在IE上下载创建a标签的话，一定要带上target属性，不然无法正常下载，还不会报错.

当所截图片超出屏幕范围的时候，用上面的方法就无法全部截取，这个时候就需要给索要截取的DOM添加一些属性，代码如图1.7：

图1.7

nodeImage,是要所截图的DOM节点，当所截图片不能填满DOM，截图之后会使内容移位，所以这个时候要加上判断，当超出部分宽度或者高度大于本身高度时，加上绝对定位的属性，要记得给DOM节点一个相对定位，当内容超出时就可以全部截图成功。个人拙见，不吝赐教。