如何用JS编写实现网页截图功能的示例代码？

本文共计1256个文字，预计阅读时间需要6分钟。

页面截图是前端常见需求，如页面生成海报、弹窗图片分享等。由于浏览器没有原生的截图API，因此需要借助canvas来实现截图需求。可行性方案：方案一：将DOM元素转换为canvas，然后导出为图片实现截图需求。

"页面截屏"是前端经常遇到的需求，比如页面生成海报，弹窗图片分享等，因为浏览器没有原生的截图API，所以需要借助canvas来实现导出图片实现需求。

可行性方案

1. 方案1： 将 DOM 改写成 canvas ，调用canvas的toBlob或者toDataURL方法即刻上传到七牛云或服务器
2. 方案2： 使用第三方库html2canvas.js实现 canvas ， 在不更改页面已有DOM的情况下优雅生产canvas

解决方案的选择

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

方案1难点

• 需要弃用已有的html页面，改用canvas重写。
• 页面结构层复杂的情况下用canvas写，不易重构。
• 有一定canvas基础。

方案2：该项目在Github上stars已有两万多start，作者仍在积极维护。API非常简单，在已有项目中开箱即用。

html2canvas

因为是常见的需求，所以社区会有成熟的解决方案，首先试试社区的解决方案。