使用 html2canvas 只需一段JS代码就能生成网页截图和海报。

该库允许您直接在用户浏览器上拍摄网页或部分网页的“屏幕截图”。屏幕截图基于 DOM，因此可能无法 100% 准确到真实表示，因为它不会制作实际的屏幕截图。

html2canvas 就是这样的一个 Javascript 库，无需大量学习，只需要会 HTML 和 CSS 即可，html2canvas 可以把网页元素或者整个网页转换为一个 Canvas 对象或者图片。

html2canvas 是通过在浏览器端解析 HTML 和 CSS 来实现这个功能，不需要任何服务器端的支持，然后也不需要对 Canvas 相关的方法深入的学习，只需要懂简单的 HTML 和 CSS 即可。

第一步：加载 html2canvas 对应的 JavaScript 库

<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

第二步：然后选择对应的网页元素生成屏幕截图：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

项目网址：https://html2canvas.hertzen.com/

项目Github开源：https://github.com/niklasvh/html2canvas

JavaScript HTML 渲染器
该脚本允许您直接在用户浏览器上拍摄网页或部分网页的“屏幕截图”。屏幕截图基于 DOM，因此可能无法 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

它是如何工作的？
该脚本通过读取 DOM 和应用于元素的不同样式，将当前页面呈现为画布图像。

它不需要从服务器进行任何渲染，因为整个图像是在客户端的浏览器上创建的。但是，由于它严重依赖于浏览器，因此此库不适合在nodejs中使用。 它也不会神奇地绕过任何浏览器内容策略限制，因此呈现跨源内容将需要代理才能将内容获取到同一来源。

该脚本仍处于实验状态，因此我不建议在生产环境中使用它，也不建议开始使用它构建应用程序，因为仍然会进行重大更改。

属性
属性名 默认值 描述
allowTaint false 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
backgroundColor #ffffff 画布背景色（如果未在DOM中指定）。设置null为透明
canvas null 现有canvas元素用作绘图的基础
foreignObjectRendering false 如果浏览器支持，是否使用ForeignObject渲染
imageTimeout 15000 加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
ignoreElements (element) => false 谓词功能，可从渲染中删除匹配的元素。
logging true 启用日志以进行调试
onclone null 克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。
proxy null 代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像。
removeContainer true 是否清除html2canvas临时创建的克隆DOM元素
scale window.devicePixelRatio 用于渲染的比例。默认为浏览器设备像素比率。
useCORS false 是否尝试使用CORS从服务器加载图像
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-scroll位置（例如，如果Element使用position: fixed）
windowWidth Window.innerWidth 渲染时使用的窗口宽度Element，这可能会影响媒体查询之类的内容
windowHeight Window.innerHeight 渲染时要使用的窗口高度Element，这可能会影响媒体查询之类的内容

解决图片清晰度问题
属性 默认值 描述
scale window.devicePixelRatio 用于渲染的比例尺。默认为浏览器设备像素比率。
每个设备的window.devicePixelRatio的值不尽一样，想清晰就调高，想压缩大小就调低。但调的越高，图片的生成时间就越长。