ps：想看高清的直接滑到资料底部即可html2canvas简介：本脚本可以让你直接在用户的浏览器上拍摄网页或其部分的“屏幕截图”。屏幕截图基于DOM，因此可能不是100%准确度的真实表示，因为它不会生成实际的屏幕截图，而是根据页面上可用的信息构建它们；html2canvas的工作原理：脚本遍历加载页面的DOM。它收集有关那里所有元素的信息，然后使用这些信息来构建页面的表示。换句话说，它不是实际截取页面的屏幕截图，而是根据从DOM读取的属性构建页面的表示。结果，它只能正确渲染它理解的属性，这意味着有很多CSS属性是无效的。有关支持的CSS属性的完整列表，请查看支持的功能页面。html2canvas支持：Firefox3.5+GoogleChromeOpera12+IE9+EdgeSafari6+快速入门方法一：es6模块化导入方法1.npm或cnpm下载html2canvas包npminstallhtml2canvas2.importimportimporthtml2canvasfrom'html2canvas';3.使用html2canvas(document.body,{}).then(function(canvas){varimgUrl=canvas.toDataURL();//imgUrl是图片的base64形式});方法二：js直接引用方法一、导入js或压缩版js或2.使用html2canvas(document.body,{}).then(function(canvas){varimgUrl=canvas.toDataURL();//imgUrl是图片的base64格式});为了解决图片清晰度的问题，在html2canvas官网上有这么一个配置项：namedefaultvalue描述了scalewindow.devicePixelRatio用于渲染。默认为浏览器设备像素比。每个设备的window.devicePixelRatio的值是不同的。想要清晰就加大，想要压缩大小就减小。但是调整越高，图片的生成时间越长。经过多次调试，我选择了一个折衷值：scale:1.3demo:html2canvas(document.body,{scale:1.3}).then(function(canvas){varimgUrl=canvas.toDataURL();//imgUrl它是图像的base64形式});
