html2Canvas是 "脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM,"附上详解地址:http://html2canvas.hertzen.com/documentation,github地址:https://github.com/niklasvh/html2canvas
html2canvas的兼容性如下图1.1:
我是在react上使用html2canvas,用法如下:
html2canvas(document.body).then(function(canvas){document.body.appendChild(canvas);});这是官方给的用法,
实例如图1.2:
获取DOM节点,通过toDataURL,获取base64链接,可以把链接赋值给创建的a标签下载,如图1.3所示
添加点击事件,因为火狐浏览器和常规浏览器的点击事件不同,所以要增加判断浏览器和方法,如图1.4:
因为IE浏览器不支持base64的下载方式,所以这里还要兼容IE,可以直接判断是否为IE,直接获取blob,然后保存,代码如图1.5所示:
window.navigator.msSaveBlob(blob,name)在IE上可以直接保存下载,因为开始想的是base64转blob,然后赋值给a标签的href,虽然方法可行,也可以保存,但是图片显示文件系统损坏,所以就找到了上面的方法,直接转blob,在这里还要提一下关于base64转blob的方法,代码如图1.6:
new Blob([放入base64链接]),url方法是将blob转成链接赋值给a标签下载,再次提醒一点,如果在IE上下载创建a标签的话,一定要带上target属性,不然无法正常下载,还不会报错.
当所截图片超出屏幕范围的时候,用上面的方法就无法全部截取,这个时候就需要给索要截取的DOM添加一些属性,代码如图1.7:
nodeImage,是要所截图的DOM节点,当所截图片不能填满DOM,截图之后会使内容移位,所以这个时候要加上判断,当超出部分宽度或者高度大于本身高度时,加上绝对定位的属性,要记得给DOM节点一个相对定位,当内容超出时就可以全部截图成功。个人拙见,不吝赐教。