这里有个栗子（请用微信打开，长按图片即可生存）：3分钟探索你的常识界限

将整个网页生存为图片是一个十分有趣的成果，常见于H5勾当页的结尾页分享。以下则是项目中调研和踩坑的一些小结和汇总。

一、实现HTML网页生存为图片 1.1 已知可行方案

现有已知能够实现网页生存为图片的方案包孕：

方案1：将DOM改写为canvas，然后操作canvas的toDataURL要领实现将DOM输出为包罗图片展示的data URI

方案2：使用html2canvas.js实现（可选搭配Canvas2Image.js实现网页生存为图片）

方案3：使用rasterizeHTML.js实现

1.2 解决方案的选择

方案1：需要手动计算每个DOM元素的Computed Style，然后需要计算好元素在canvas的巨细位置等属性。

方案1难点：

相当于完全重写了整个页面的构造样式，增加了事情量。

由于canvas中是没有的东西观点，对付元素丰富、构造庞大的页面，不易重构

所有DOM元素改写进canvas会带来一些困难，例如：难以撑持响应式，图片元素清晰度欠安和文字点击区域识别问题等。

方案2：该类成果中Github上stars最多(至今仍在维护)，Stack Overflow亦有丰富的讨论。只需简单挪用html2canvas要领并设定配置项即可。

方案3：该方案的限制较多，目前仅撑持3类可转为canvas的方针格局: 页面url，html字符串和document东西。

小结: html2canvas是目前实现网页生存为图片成果的综合最佳选择。

1.3 html2canvas的使用要领

官方GitHub：https://github.com/niklasvh/h...

以下描述针对html2canvas版本是0.5.0-beta4

1.3.1 实现生存为图片的第一步：html转为canvas

基于html2canvas.js可将一个元素衬着为canvas，只需要简单的挪用html2canvas(element[, options]);即可。下列html2canvas要领会返回一个包罗有<canvas>元素的promise：

html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); 1.3.2 实现生存为图片的第二步：canvas转image

上一步生成的canvas即为包罗方针元素的<canvas>元素东西。实现生存图片的方针只需要将canvas转image即可。

这里的转换方案有2种：

方案1：基于原生canvas的toDataURL要领将canvas输出为data: URI类型的图片地点，再将该图片地点赋值给<image>元素的src属性即可

MDN:toDataURL() API 详解

方案2：使用第三方库Canvas2Image.js，挪用其convertToImage要领即可（GitHub）

实际上，，Canvas2Image.js也是基于canvas.toDataURL的封装，对比原生的canvas API对付转为图片的成果上考虑更为具体(未压缩的包巨细为7.4KB)，适合项目使用。

二、实现高清截图的优化方案 2.1 根本的清晰截图优化方案

最终图片的清晰度取决于第一步中html转换成的canvas的清晰度。

现有解决方案参考；

html5 canvas在高倍屏下变模糊的措置惩罚惩罚步伐

html5 canvas绘制图片模糊的问题

其基来源根底理为：
将canvas的属性width和height属性放大为2倍（或者设置为devicePixelRatio倍），最后将canvas的CSS样式width和height设置为原先1倍的巨细。

例如：但愿在html中实际显示的<canvas>宽高分袂为160px,90px则可作如下设置

<canvas></canvas>

参考上述文档具体的使用案例如下；

convert2canvas() { var shareContent = YourTargetElem; var width = shareContent.offsetWidth; var height = shareContent.offsetHeight; var canvas = document.createElement("canvas"); var scale = 2; canvas.width = width * scale; canvas.height = height * scale; canvas.getContext("2d").scale(scale, scale); var opts = { scale: scale, canvas: canvas, logging: true, width: width, height: height }; html2canvas(shareContent, opts).then(function (canvas) { var context = canvas.getContext(‘2d‘); var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height); document.body.appendChild(img); $(img).css({ "width": canvas.width / 2 + "px", "height": canvas.height / 2 + "px", }) }); } 2.2 进阶的清晰截图优化方案

上述设置可以解决凡是的截图效果不清晰问题，不过探索还远没有结束。

实际在我们的项目中，即使作出2.1节的设置后，模糊成大果粒的衬着功效依然给清晰的幻想打了0分。

下面直接给出3条进一步的优化计谋：

变动百分比构造为px构造（如果原先是百分比构造的话）

封锁canvas默认的抗锯齿设置

设置模糊元素的width和height为素材原有宽高，然后通过transform: scale进行缩放。这里scale的数值由具体需求决定。

基来源根底理

如果本来使用百分比设置元素宽高，请变动为px为单位的宽高，制止样式二次计算导致的模糊

默认情况下，canvas的抗锯齿是开启的，需要封锁抗锯齿来实现图像的锐化(MDN: imageSmoothingEnabled )

除了canvas可以通过扩大2倍宽高然后缩放至原有宽高来提高清晰度，对付DOM中其他的元素也可以使用css样式的scale来实现同样的缩放