用JavaScript实现浏览器截图功能的全过程_javascript技巧

最近项目中要实现一个需求： 

用户希望在上传文件时能够直接截图上传，并且要求能够截图浏览器外的内容。

多方查找之下找到了类似的解决方案，但个人感觉操作上有些抽象，仅供参考。

const startButton = document.getElementById('start-screenshot'); // 开始截图按钮const screenshotContainer = document.getElementById('screenshot-container'); // 获取的图片展示区const canvas = document.getElementById('screenshot-canvas'); // canvasconst ctx = canvas.getContext('2d');const selectionArea = document.getElementById('selection-area'); // 截图区域const toolbar = document.getElementById('screenshot-toolbar'); // 截图时右下角的小弹框const confirmButton = document.getElementById('confirm-screenshot'); // 确认按钮const cancelButton = document.getElementById('cancel-screenshot'); // 取消按钮

变量定义

function updateSelectionArea() { const width = Math.abs(endX - startX); const height = Math.abs(endY - startY); const left = Math.min(startX, endX); const top = Math.min(startY, endY); selectionArea.style.display = 'block'; selectionArea.style.left = left + 'px'; selectionArea.style.top = top + 'px'; selectionArea.style.width = width + 'px'; selectionArea.style.height = height + 'px'; // 更新工具栏位置 toolbar.style.display = 'flex'; toolbar.style.left = (left + width + 5) + 'px'; toolbar.style.top = (top + height + 5) + 'px';}

确认截图（在这里获取截图结果）

function confirmScreenshot() { if (!isCapturing) return; const width = Math.abs(endX - startX); const height = Math.abs(endY - startY); const left = Math.min(startX, endX); const top = Math.min(startY, endY); // 创建新画布以保存选定区域 const resultCanvas = document.createElement('canvas'); resultCanvas.width = width; resultCanvas.height = height; const resultCtx = resultCanvas.getContext('2d'); // 将选定区域绘制到新画布 resultCtx.drawImage( canvas, left, top, width, height, 0, 0, width, height ); // 在这里获取截图结果 // 如果想生成成一个Base64url const base64Url = resultCanvas.toDataURL(); // 如果想生成成一个file对象 const resultFile = dataURLtoFile(resultCanvas.toDataURL(), "截图.png") // 重置截图状态 resetScreenshot();}

将Base64数据转换为File对象（不需要转换结果为文件对象可以不写这段）

function dataURLtoFile(dataurl, filename) { // 将Base64数据拆分为MIME类型和实际数据 const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1]; // 获取MIME类型 const bstr = atob(arr[1]); // 解码Base64数据 let n = bstr.length; const u8arr = new Uint8Array(n); // 将解码后的数据转换为Uint8Array while (n--) { u8arr[n] = bstr.charCodeAt(n); } // 创建并返回File对象 return new File([u8arr], filename, { type: mime });}

取消截图

// 事件监听器startButton.addEventListener('click', startScreenshot);confirmButton.addEventListener('click', confirmScreenshot);cancelButton.addEventListener('click', cancelScreenshot);// 鼠标事件处理canvas.addEventListener('mousedown', function(e) { if (!isCapturing) return; isSelecting = true; startX = e.clientX; startY = e.clientY; endX = e.clientX; endY = e.clientY; updateSelectionArea();});canvas.addEventListener('mousemove', function(e) { if (!isSelecting) return; endX = e.clientX; endY = e.clientY; updateSelectionArea();});canvas.addEventListener('mouseup', function() { isSelecting = false;});// 窗口大小改变时重新设置画布大小window.addEventListener('resize', function() { if (isCapturing) { setCanvasSize(); }});

键盘快捷键（不需要可以不用）

// 键盘快捷键document.addEventListener('keydown', function(e) { // Alt + A 开始截图 if (e.altKey && e.key === 'a') { e.preventDefault(); startScreenshot(); } // Enter 确认截图 if (e.key === 'Enter' && isCapturing) { confirmScreenshot(); } // Esc 取消截图 if (e.key === 'Escape' && isCapturing) { cancelScreenshot(); }});

姑且算是实现了这个需求，但是实现效果并不是很理想，只能说仅供参考吧

到此这篇关于用JavaScript实现浏览器截图功能的文章就介绍到这了,更多相关JS浏览器截图功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

上一篇：Threejs中自定义UV坐标贴图举例超详细讲解j

下一篇：JavaScript数组some和every方法最佳实践指