实现自定义鼠标截屏工具的完整HTML代码，包含可视化区域选择、截图预览和下载功能

最新推荐文章于 2025-12-11 16:58:18 发布
原创 最新推荐文章于 2025-12-11 16:58:18 发布 · 248 阅读 · 0 ·
CC 4.0 BY-SA版权
文章标签：

#计算机外设 #html #前端

以下是实现自定义鼠标截屏工具的完整HTML代码，包含可视化区域选择、截图预览和下载功能：

荻酷屏幕截图工具
功能完整：实现鼠标拖拽选择截图区域、实时预览、多种格式下载功能
自定义设置：可调整选择框颜色和边框样式（实线/虚线/点线）
交互友好：提供操作引导、状态反馈和错误提示
响应式设计：适配不同屏幕尺寸，移动端和桌面端均可使用
视觉美观：采用现代化UI设计，包含平滑过渡动画和阴影效果
技术实现：纯前端方案，无需后端支持，使用Canvas API处理图像

荻酷屏幕截图工具代码


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义截屏工具</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        #selection-box {
            position: absolute;
            border: 2px dashed #3B82F6;
            background-color: rgba(59, 130, 246, 0.2);
            display: none;
            z-index: 9998;
        }
        #preview-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        .tool-btn {
            transition: all 0.2s;
        }
        .tool-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto">
            <h1 class="text-3xl font-bold text-blue-600 mb-6 text-center">
                <i class="fas fa-camera mr-2"></i>自定义截屏工具
            </h1>
            
            <div class="flex flex-col md:flex-row gap-6">
                <div class="md:w-1/3">
                    <div class="bg-blue-50 rounded-lg p-4 shadow-inner">
                        <h2 class="text-xl font-semibold text-blue-800 mb-4">操作指南</h2>
                        <ol class="list-decimal pl-5 space-y-2 text-gray-700">
                            <li>点击"开始截屏"按钮</li>
                            <li>在屏幕上拖动鼠标选择区域</li>
                            <li>释放鼠标完成选择</li>
                            <li>在预览窗口保存或重试</li>
                        </ol>
                        
                        <div class="mt-6 space-y-4">
                            <button id="start-btn" class="w-full tool-btn bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
                                <i class="fas fa-play mr-2"></i>开始截屏
                            </button>
                            <button id="cancel-btn" disabled class="w-full tool-btn bg-gray-400 text-white py-2 px-4 rounded-lg flex items-center justify-center">
                                <i class="fas fa-times mr-2"></i>取消截屏
                            </button>
                        </div>
                    </div>
                    
                    <div class="mt-6 bg-gray-50 rounded-lg p-4 shadow-inner">
                        <h2 class="text-xl font-semibold text-gray-800 mb-3">设置</h2>
                        <div class="space-y-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">边框颜色</label>
                                <input type="color" id="border-color" value="#3B82F6" class="w-full h-10 cursor-pointer">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">边框样式</label>
                                <select id="border-style" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="dashed">虚线</option>
                                    <option value="solid">实线</option>
                                    <option value="dotted">点线</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="md:w-2/3">
                    <div class="bg-white border-2 border-dashed border-gray-300 rounded-lg p-4 h-64 md:h-96 relative overflow-hidden">
                        <p class="text-center text-gray-500 mt-20">截屏区域将在此显示</p>
                        <img id="sample-image" src="https://picsum.photos/800/500?random=1" alt="示例图片" class="hidden w-full h-auto">
                        <div id="selection-box"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="preview-container">
        <div class="bg-white rounded-xl shadow-xl max-w-4xl w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-2xl font-bold text-blue-600">截图预览</h2>
                <button id="close-preview" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>
            
            <div class="border border-gray-200 rounded-lg overflow-hidden mb-4">
                <canvas id="preview-canvas" class="w-full"></canvas>
            </div>
            
            <div class="flex flex-wrap gap-3 justify-center">
                <button id="download-png" class="tool-btn bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg flex items-center">
                    <i class="fas fa-download mr-2"></i>下载PNG
                </button>
                <button id="download-jpg" class="tool-btn bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-lg flex items-center">
                    <i class="fas fa-download mr-2"></i>下载JPG
                </button>
                <button id="retry-btn" class="tool-btn bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-6 rounded-lg flex items-center">
                    <i class="fas fa-redo mr-2"></i>重新截屏
                </button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 获取DOM元素
            const startBtn = document.getElementById('start-btn');
            const cancelBtn = document.getElementById('cancel-btn');
            const selectionBox = document.getElementById('selection-box');
            const previewContainer = document.getElementById('preview-container');
            const previewCanvas = document.getElementById('preview-canvas');
            const closePreview = document.getElementById('close-preview');
            const downloadPng = document.getElementById('download-png');
            const downloadJpg = document.getElementById('download-jpg');
            const retryBtn = document.getElementById('retry-btn');
            const borderColor = document.getElementById('border-color');
            const borderStyle = document.getElementById('border-style');
            const sampleImage = document.getElementById('sample-image');
            
            // 截图状态变量
            let isSelecting = false;
            let startX, startY, endX, endY;
            let ctx = previewCanvas.getContext('2d');
            
            // 开始截屏
            startBtn.addEventListener('click', () => {
                isSelecting = true;
                startBtn.disabled = true;
                cancelBtn.disabled = false;
                sampleImage.classList.remove('hidden');
                document.body.style.cursor = 'crosshair';
            });
            
            // 取消截屏
            cancelBtn.addEventListener('click', () => {
                resetSelection();
            });
            
            // 鼠标按下事件 - 开始选择区域
            document.addEventListener('mousedown', (e) => {
                if (!isSelecting) return;
                
                startX = e.clientX;
                startY = e.clientY;
                
                selectionBox.style.left = startX + 'px';
                selectionBox.style.top = startY + 'px';
                selectionBox.style.width = '0px';
                selectionBox.style.height = '0px';
                selectionBox.style.display = 'block';
                selectionBox.style.borderColor = borderColor.value;
                selectionBox.style.borderStyle = borderStyle.value;
            });
            
            // 鼠标移动事件 - 调整选择区域大小
            document.addEventListener('mousemove', (e) => {
                if (!isSelecting || !selectionBox.style.display === 'block') return;
                
                endX = e.clientX;
                endY = e.clientY;
                
                const width = endX - startX;
                const height = endY - startY;
                
                selectionBox.style.width = Math.abs(width) + 'px';
                selectionBox.style.height = Math.abs(height) + 'px';
                
                if (width < 0) {
                    selectionBox.style.left = endX + 'px';
                }
                if (height < 0) {
                    selectionBox.style.top = endY + 'px';
                }
            });
            
            // 鼠标释放事件 - 完成选择
            document.addEventListener('mouseup', () => {
                if (!isSelecting || !selectionBox.style.display === 'block') return;
                
                // 确保选择区域有效
                if (Math.abs(endX - startX) > 10 && Math.abs(endY - startY) > 10) {
                    showPreview();
                } else {
                    resetSelection();
                    alert('请选择更大的区域');
                }
            });
            
            // 显示预览
            function showPreview() {
                isSelecting = false;
                selectionBox.style.display = 'none';
                document.body.style.cursor = 'default';
                
                // 计算实际截图区域
                const rect = selectionBox.getBoundingClientRect();
                const left = Math.min(startX, endX);
                const top = Math.min(startY, endY);
                const width = Math.abs(endX - startX);
                const height = Math.abs(endY - startY);
                
                // 设置画布尺寸
                previewCanvas.width = width;
                previewCanvas.height = height;
                
                // 绘制截图到画布
                ctx.drawImage(
                    sampleImage,
                    left - sampleImage.getBoundingClientRect().left,
                    top - sampleImage.getBoundingClientRect().top,
                    width,
                    height,
                    0,
                    0,
                    width,
                    height
                );
                
                // 显示预览窗口
                previewContainer.style.display = 'flex';
            }
            
            // 关闭预览
            closePreview.addEventListener('click', () => {
                previewContainer.style.display = 'none';
                resetSelection();
            });
            
            // 重新截屏
            retryBtn.addEventListener('click', () => {
                previewContainer.style.display = 'none';
                isSelecting = true;
                selectionBox.style.display = 'block';
                document.body.style.cursor = 'crosshair';
            });
            
            // 下载PNG
            downloadPng.addEventListener('click', () => {
                downloadImage('png');
            });
            
            // 下载JPG
            downloadJpg.addEventListener('click', () => {
                downloadImage('jpeg');
            });
            
            // 下载图片
            function downloadImage(format) {
                const link = document.createElement('a');
                link.download = `screenshot_${new Date().getTime()}.${format === 'png' ? 'png' : 'jpg'}`;
                link.href = previewCanvas.toDataURL(`image/${format}`);
                link.click();
            }
            
            // 重置选择状态
            function resetSelection() {
                isSelecting = false;
                startBtn.disabled = false;
                cancelBtn.disabled = true;
                selectionBox.style.display = 'none';
                document.body.style.cursor = 'default';
                sampleImage.classList.add('hidden');
            }
            
            // 监听边框样式变化
            borderColor.addEventListener('change', () => {
                selectionBox.style.borderColor = borderColor.value;
            });
            
            borderStyle.addEventListener('change', () => {
                selectionBox.style.borderStyle = borderStyle.value;
            });
        });
    </script>
</body>
</html>

Tailwind CSS 实战：响应式布局最佳实践
ChengFengTech的博客
01-02 1253
通过这篇文章,我们详细探讨了如何使用 Tailwind CSS 构建完美的响应式布局。从基础布局到复杂交互,从性能优化到可访问性支持,我们不仅关注了视觉效果,更注重了用户体验和技术实现。记住,一个优秀的响应式布局就像一位灵活的建筑师,需要在不同的场景下都能提供最佳的用户体验。在实际开发中,我们要始终以用户需求为中心,在美观和实用之间找到最佳平衡点。
Qt4实现的自定义鼠标截图工具及源代码解析
weixin_35696112的博客
06-26 984
Qt4是Nokia公司开发的一套跨平台应用程序框架，其首个版本发布于2005年。Qt4的特点包括对C++特性的全面支持、强大的信号与槽机制、丰富易用的图形用户界面组件等。其跨平台性允许开发者使用同一套代码库在多个操作系统上进行开发，大大提高了开发效率。在图形用户界面（GUI）编程中，鼠标事件处理是交互设计的核心部分。Qt4框架为鼠标事件提供了丰富的分类和定义，允许开发者实现精确的用户交互。Qt中的鼠标事件主要分为以下几类：：鼠标按下事件，当用户按下鼠标按钮时触发。
Delphi实现屏幕截图功能的完整代码示例与详解
weixin_35364187的博客
09-16 819
Delphi凭借其强大的Windows平台集成能力，在图形处理领域展现出独特优势。本章从整体视角切入，介绍Delphi实现屏幕截图的技术基础——核心依赖于Windows GDI（图形设备接口）与系统API的高效交互。通过封装底层API，Delphi可精准获取屏幕设备上下文（HDC），并利用位图对象完成像素数据的捕获与保存。该技术广泛应用于自动化测试、远程桌面控制及用户行为分析等场景，具备高稳定性与执行效率，为后续章节深入解析API调用、HDC管理及图像复制机制奠定理论基础。
基于vue3.2+ts实现的svg可视化web组态编辑器。可无需修改代码动态添加组件、自定义拓展组件参数
weixin_49095074的博客
03-22 5578
vue就是边做这个项目边学的 代码可能有点乱 还望各位大神勿喷 如果代码对您有帮助 麻烦辛苦帮我点个star 预览地址 https://svg.yaolunmao.top 如何使用 # 克隆项目 git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git # 进入项目目录 cd vue-webtopo-svgeditor # 安装依赖 yarn install # 启动服务 yarn serve 操作 点击载入模板 进入预览页
基于vue3+threejs实现可视化大屏
2401_83384536的博客
06-30 3284
Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。本文需要对 threejs 的一些基本概念和 api 有一定了解。如果对 threejs 这部分还不了解的可以看下官方文档和一些中文文档进行学习。官方文档地址：threejs.org/中文文档地址：www.webgl3d.cn/pages/aac9a…
超级截屏王：电脑截图及文字识别全能工具
weixin_42504649的博客
08-13 779
随着数字化时代的发展，截图工具已成为IT工作中不可或缺的辅助软件。它简化了信息传递和问题记录的过程，特别是在远程协助、用户界面设计和软件测试等领域。市场上涌现了多种截图工具，它们各有特色，但共同点在于提供快速、便捷、高质量的截图服务。分辨率是指图像的尺寸，用宽度和高度的像素数来表示。高分辨率的截图提供了更多的细节和清晰度，这对于需要放大查看或是用于高质量打印的场景尤为重要。然而，高分辨率也意味着更大的文件大小，可能对存储空间和网络传输速度造成影响。在进行截图时，应根据不同的需求选择合适的分辨率。
14、以人为本设计理念下的本体可视化工具实践
flower的专栏
10-06 21
本文介绍了基于以人为本设计理念开发的本体可视化工具Knoocks，通过四个迭代周期不断优化其结构可见性、类与实例展示、关系表达及用户交互功能。文章对比了Knoocks与TGVizTab、Jambalaya、CropCircles等现有工具在可视化方式、操作便捷性和视图展示上的差异，分析了各阶段用户评估结果，并提出了未来在性能优化、功能扩展和用户体验提升方面的发展方向。
一步到位的网页完整截图工具设计
weixin_28787801的博客
08-13 948
随着互联网技术的发展，网页内容变得日益丰富和复杂。为了更高效地记录和分享这些信息，网页滚动截图工具应运而生。这类工具允许用户轻松捕捉整个网页的内容，而不仅仅是当前可见的部分。与传统的截图工具相比，它们提供了一个更全面、更连贯的视觉记录方式，使得内容的分享、存档和审查变得更加简单。网页滚动截图工具不仅提高了个人工作效率，也给教育、新闻媒体和法律等领域带来了巨大便利。这些工具的普及也促进了在线协作的发展，使得跨地域团队的沟通和信息共享更加顺畅。
无需插件的纯JavaScript网页截图功能实现
weixin_35749796的博客
08-17 340
WebGL是一个用于在Web浏览器中渲染交互式2D和3D图形的JavaScript API，它基于OpenGL ES 2.0。WebGL提供了直接访问GPU的能力，允许开发人员直接在浏览器中绘制复杂的3D图形。WebGL（Web Graphics Library）是一个JavaScript API，它通过渲染管线（Graphics Pipeline）将OpenGL ES的API映射到Web浏览器，用于渲染3D和2D矢量图形。
易语言实现截图预览与保存功能源码
易语言截图小精灵是一款基于易语言开发的实用型图形处理工具，其主要功能是实现屏幕截图、图像预览以及文件保存。该程序通过调用Windows系统底层API函数，并结合“截图模块.ec”这一自定义或第三方提供的易语言模块...
Qt实现桌面界面截图功能的源代码
例如，在实际应用中，用户可能会通过鼠标拖拽选择一个矩形区域来进行精准截图，这就要求程序具备事件过滤能力，监听鼠标的按下、移动和释放事件（mousePressEvent、mouseMoveEvent、mouseReleaseEvent），动态绘制...
Windows屏幕对象捕捉工具实现控件区域截图
这意味着程序可能实现了控件遍历功能，允许用户通过鼠标点击选择任意控件，程序则自动识别该控件的HWND，并计算其相对于屏幕的绝对坐标（通过`ClientToScreen`和`GetWindowRect`等函数），进而精准截取该区域。...
C#区域截图工具CShot实现屏幕捕获与剪贴板复制
极有可能封装了完整的截图逻辑类，包含多个关键方法，如CaptureScreen()、CaptureWindow()、CaptureRegion()以及CaptureControl()等，分别对应全屏截图、窗口截图、自定义区域截图和控件截图等功能模块。 在具体...
基于CRectTracker实现截图功能的MFC程序
“使用CRectTracker写的带有截图功能的程序”这一标题所描述的是一个基于MFC（Microsoft Foundation Classes）框架开发的Windows桌面应用程序，其核心功能是实现屏幕截图...该程序结合了“橡皮筋技术”...
26键打字训练小游戏：键盘练习游戏合集
MMMMM
12-10 567
我试过一次，眼看就要破百层，结果“butterfly”拼成“butterfliy”，“啪叽”——前功尽弃！你手一动，键盘就是激光炮，“轰”一下，词打对了，敌机就炸成烟花。这些游戏，等车时开一把，睡前玩两局，手指快了，准确率高了，关键是——开心！屏幕上蹦出词，你打一个，它就往前蹿一截。我给你挑了一堆特别“上头”的打字小游戏，全是那种一打开就停不下来、打着打着发现“咦，我怎么打得这么快了”的神仙游戏。在这里，你不是在敲键盘，你是切水果的忍者、是深海探险的美人鱼、是拯救地球的英雄——每敲一个键，都像在闯关！
Pelco KBD300A 模拟器:01.Pelco 协议前世今生 & KBD300A 键盘基础解析
最新发布
dangzuo的博客
12-11 919
本文介绍了Pelco协议的发展历程及KBD300A键盘控制器的功能解析。作为安防领域的经典协议，Pelco-D/P协议凭借其简单可靠的结构和广泛兼容性，至今仍广泛应用于PTZ摄像机控制。文章详细对比了Pelco-D和Pelco-P协议的技术特点，并完整解析了KBD300A键盘的硬件布局和功能分区，包括LCD显示屏、摇杆控制、数字键盘和高级功能键等核心组件。同时展示了基于Python开发的协议模拟工具，该工具支持串口通信、协议识别、指令集操作等完整功能，可用于老旧系统的维护与调试。
Raycaster(鼠标点击选中模型)
wangmujia的博客
12-11 367
Raycaster（射线投射器）是Three.js中用于实现**鼠标拾取（3D对象选择）**的核心类。它通过从相机位置发射一条射线，检测与哪些3D对象相交，从而实现点击选中功能。
键盘参数选购
weixin_46473460的博客
12-09 314
结构：预润滑 + POM 或 LY 轴杆。触发方式：金属触点 / 磁轴皆可。弹簧：长弹簧（15–20 mm）预行程：1.4–1.8 mm。总行程：3.6–4.0 mm。类型：线性轴 / 轻段落轴。触发压力：45–55 g。
PC端游变手游！向日葵游戏键盘功能免费了！
oray2013的专栏
12-10 322
undefined
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

荻酷社区

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值