html2canvas-实现页面截图

• 将DOM改写为canvas，然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data url。
• 使用HtmlCanvas2实现。
• 使用rasterizeHTML.js实现。

优缺点分析：

(1)、利用DOM改写为canvas的方式：相当于完全重写了整个页面的布局样式，增加了工作量。 由于canvas中没有的对象概念，对于元素丰富、布局复杂的页面，不易重构。 所有DOM元素改写进canvas会带来一些困难。例如：难以支持响应式。

(2)、利用HtmlCanvas的方式：只需简单调用html2canvas方法并设定配置项即可。脚本使用的所有图像需要驻留在同一个源下，如果页面上有其他画布元素，这些元素已经被跨源内容污染，不再能被html2canvas读取。

(3)、使用rasterizeHTML.js实现：限制较多，目前仅支持3类可转为canvas的目标格式: 页面url，html字符串和document对象。

html2canvas脚本截图原理

脚本允许你直接在用户浏览器上获取网页的截图或部分内容。屏幕截图是基于DOM的，因此对于真实的表示来说，它可能不是100%准确的，因为它不做实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。它实际上并不获取页面的屏幕截图，而是基于从DOM读取的属性构建页面的表示。因此，它只能正确地描述它所理解的属性，这意味着有许多CSS属性不起作用。

怎样安装使用html2canvas？

安装 npm install html2canvas
引入 import html2canvas from ‘html2canvas’;

（1）html2canvas参数

（2）html2canvas的使用方法

• 第一步：实现保存为图片的第一步：html转为canvas
  基于html2canvas.js可将一个元素渲染为canvas，然后Promise对象会将截取的图片传递给参数canvas。
  html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); });
• 第二步：canvas转image
  上一步生成的canvas即为包含目标元素的canvas元素对象。实现保存图片的目标只需要将canvas转image即可。
  基于原生canvas的toDataURL方法将canvas输出为data: URI类型的图片地址，再将该图片地址赋值给元素的src属性即可。