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节点一个相对定位，当内容超出时就可以全部截图成功。个人拙见，不吝赐教。
网友评论