JavaScript实现窗口截图(附完整源码)

最新推荐文章于 2025-06-28 09:12:24 发布

源代码大师

最新推荐文章于 2025-06-28 09:12:24 发布

阅读量493

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript实战教程文章标签： javascript 前端开发语言 1024程序员节

不予转载，严禁转载，违者必纠。

本文链接：https://blog.csdn.net/it_xiangqiang/article/details/134001842

JavaScript实战教程专栏收录该内容

950 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用JavaScript实现浏览器窗口的截图功能。通过HTML和JavaScript代码的结合，用户可以点击按钮截取当前浏览器窗口并保存为PNG图片。详细步骤包括将代码保存为HTML和JS文件，然后在浏览器中打开HTML文件触发截图操作。

JavaScript实现窗口截图

以下是JavaScript实现窗口截图的完整源码：

HTML部分：

<!DOCTYPE html>
<html>
<head>
	<title>Window Screenshot</title>
</head>
<body>
	<h1>Take a Screenshot of the Window</h1>
	<button onclick="capture()">Capture</button>
	<canvas id="canvas"></canvas>
	<script src="screenshot.js"></script>
</body>
</html>

JavaScript部分（保存在screenshot.js文件中）：

// 获取窗口的大小
const width = window.innerWidth;
const height = window.innerHeight;

// 创建一个Canvas元素
const canvas = document.createElement('canvas');

// 设置Canvas的宽高为窗口的大小
canvas.width = width;
canvas.height = height;

// 获取Canvas的上下文
const context = canvas.getContext('2d');

// 将Canvas添加到DOM中
document.body.appendChild(canvas);

//

了解本专栏