html2canvas-实现页面截图

如何将HTML页面保存为图片？

• 将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参数

名称	默认	描述
async	true	是否异步解析和呈现元素
allowTaint	false	是否容许跨原始图像污染画布
backgroundColor	#ffffff	画布背景颜色，若是在DOM中未指定，设置 null 为透明
canvas	null	现有画布元素用做绘图的基础
foreignObjectRendering	false	是否在浏览器支持的状况下使用ForeignObject渲染持
imageTimeout	15000	加载图像的超时（以毫秒为单位，设置 0 为禁用超时
ignoreElements	(element)=>false	谓词函数，用于从渲染中删除匹配元素
logging	true	启用日志记录以进行调试
onclone		在克隆文档进行渲染时调用的回调函数可用于修改将在不影响原始源文档的状况下呈现的内容。
proxy	null	Url到 代理 ，用于加载跨源图像。若是留空，则不会加载跨原始图像。
removeContainer	true	是否要清理克隆的DOM元素html2canvas会暂时建立
scale	window.devicePixelRatio	用于渲染的比例，默认为浏览器设备像素比率
useCORS	false	用来设置是否容许使用跨域的图片进行访问
width	element width	canvas的宽度
height	element height	canvas高度设定
x	element x-offset	裁剪画布x坐标
y	element y-offset	裁剪画布y坐标
scrollX	element scrollX	渲染元素时使用的x滚动位置（例如，若是Element使用 position: fixed ）
scrollY	element scrollY	渲染元素时使用的y滚动位置（例如，若是Element使用 position: fixed ）
windowWidth	Window.innerWidth	渲染元素时使用的窗口宽度，这可能会影响媒体查询之类的东西
windowHeight	Window.innerHeght	染时使用的窗口高度 Element ，这可能会影响媒体查询等内容
taintTest	true	在渲染前测试图片

（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属性便可。
  

（3）生成的图片清晰度优化

• 将canvas的属性width和height属性放大为2倍（或者设置为devicePixelRatio倍），最后将canvas的CSS样式width和height设置为原先1倍的大小。
  www.cnblogs.com/regina1123/…
  <canvas width="320" height="180" style="width:160px;height:90px;"></canvas>
• 更改百分比布局为px布局
  若是原来使用百分比设置元素宽高，请更改成px为单位的宽高，避免样式二次计算致使的模糊。
• 关闭canvas默认的抗锯齿设置
  默认状况下，canvas的抗锯齿是开启的，须要关闭抗锯齿来实现图像的锐化 （imageSmoothingEnabled）。
  blog.csdn.net/yiifaa/arti…
• 设置模糊元素的width和height为素材原有宽高，而后经过transform: scale进行缩放。这里scale的数值由具体需求决定。
  .targetElem {width: 54px;height: 142px;margin-top:2px;margin-left:17px;transform: scale(0.5)}

（4）跨域图片的设置

• 针对CDN中的图片的配置 开启html2canvas的useCORS配置项(useCORS: true) 若是没有开启html2canvas的useCORS配置项，html2canvas会正常执行且不会报错，可是不会输出对应的CDN图片 （已测试同时包含CDN的图片和本地图片的资源的页面，可是只有本地图片可以被正常渲染出来）