前端实现截图并下载

2024-01-09 19:38:09

原理:

使用一个名为html2canvas的JavaScript库。这个库允许你将当前的HTML内容渲染到一个canvas元素上，然后将其转换为图像并进行下载。
你需要在项目中引入html2canvas库。你可以从官方网站（https://html2canvas.hertzen.com/）下载，或使用npm或yarn等包管理工具进行安装。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./html2canvas.min.js"></script>
</head>
<body>
    <div id="screenshotDiv">
        <h1>Screenshot and Download</h1>
        <div style="height: 100px;width: 150px;background-color: red;"></div>
        <div style="height: 100px;width: 150px;background-color: green;"></div>
        <div style="height: 100px;width: 150px;background-color: greenyellow;"></div>
    </div>
    <button onclick="captureScreenshot()">Capture and Download</button>
</body>
<script>
 function captureScreenshot() {
    // var element = document.documentElement;//整个页面
    var element = document.getElementById("screenshotDiv");//局部页面
    html2canvas(element).then(function(canvas) {
    var dataUrl = canvas.toDataURL('image/png');
    var link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = dataUrl;
    link.click();
});
};
</script>
</html>

效果:

在这里插入图片描述

注意:

使用html2canvas库来捕捉当前HTML文档的内容，并将其渲染到canvas元素上。一旦内容被渲染，它将把canvas转换为数据URL，并创建一个带有适当下载属性的链接元素。最后，它模拟点击链接来触发截图的下载。
确保通过从官方网站下载库文件或从CDN引用它来在项目中引入html2canvas.min.js文件。该库提供了其他配置选项，可以用来自定义截图捕捉的过程。
请记得在不同的浏览器和环境中进行测试，以确保兼容性。

文章来源:https://blog.csdn.net/kuilaurence/article/details/135487180
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。