如何将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倍的大小。
https://www.cnblogs.com/regina1123/p/6234719.html
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>
更改百分比布局为px布局
如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊。
关闭canvas默认的抗锯齿设置
默认情况下，canvas的抗锯齿是开启的，需要关闭抗锯齿来实现图像的锐化（imageSmoothingEnabled）。
https://blog.csdn.net/yiifaa/article/details/72812630
设置模糊元素的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的图片和本地图片的资源的页面，但是只有本地图片能够被正常渲染出来）