JS中实现网页截图

最新推荐文章于 2024-08-22 16:30:34 发布

weixin_34268843

最新推荐文章于 2024-08-22 16:30:34 发布

阅读量2k

点赞数 2

文章标签：前端 ViewUI

原文链接：https://segmentfault.com/a/1190000016305106

版权

本文介绍了如何使用html2canvas将DOM转换成canvas，并通过toDataURL和toBlob导出图片，接着讲解如何保存Blob为文件，以及在前端实现图片调优的方法，包括调整scale参数和指定窗口宽高等。

摘要由CSDN通过智能技术生成

前端页面中可以使用JS将整个网页或一部分区域截取成图片并导出。

今天刚做了一次这个功能，和大家分享一下经验。

网页截图的第一步，就是将dom转换图片。目前比较好用的处理方式是先将dom转换成canvas，再从canvas中导出图片。

可以使用html2canvas这个库来实现dom转换成canvas。

示例代码：

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

canvas展示的时候，本身就有保存为图片的功能。

如果需要的话，也可以在JS中手动操控。

canvas 有两个API可以用来导出图片，分别是 toDataURL 和 toBlob

关注