绿色chrome截屏插件资源-CSDN下载

共12个文件

png：3个

js：3个

ds_store：2个

代码

47 浏览量 2025-07-04 22:42:06 上传评论收藏 43KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

screenshot-extension.zip （12个子文件）

screenshot-extension

style.css 1003B

.DS_Store 6KB

stitched_screenshot.html 3KB

manifest.json 1KB

popup.js 3KB

popup.html 740B

content.js 2KB

icons

.DS_Store 6KB

icon16.png 2KB

icon48.png 5KB

icon128.png 25KB

background.js 6KB

<!DOCTYPE html> <html> <head> <title>拼接截屏</title> <meta charset="UTF-8"> <style> body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; } canvas { border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 90vw; /* 限制最大宽度，适应屏幕 */ max-height: 90vh; /* 限制最大高度，适应屏幕 */ } #loading-text { font-size: 18px; color: #555; } </style> </head> <body> <div id="loading-text">正在拼接图片，请稍候...</div> <canvas id="screenshotCanvas" style="display:none;"></canvas> <script> document.addEventListener('DOMContentLoaded', async () => { const canvas = document.getElementById('screenshotCanvas'); const ctx = canvas.getContext('2d'); const loadingText = document.getElementById('loading-text'); try { // 从 storage.local 获取截图数据 const result = await chrome.storage.local.get(['fullPageScreenshots']); const screenshots = result.fullPageScreenshots || []; if (screenshots.length === 0) { loadingText.textContent = '没有找到截屏数据。'; return; } // 获取第一张截图的宽度作为最终图片的宽度 // 假设所有截图宽度相同 const firstImage = new Image(); firstImage.src = screenshots[0].dataUrl; await new Promise(resolve => firstImage.onload = resolve); const imageWidth = firstImage.width; // 计算最终图片的总高度 const totalHeight = screenshots[screenshots.length - 1].yOffset + firstImage.height; canvas.width = imageWidth; canvas.height = totalHeight; canvas.style.display = 'block'; // 显示 canvas loadingText.style.display = 'none'; // 隐藏加载文本 // 绘制所有截图到 Canvas for (const screenshot of screenshots) { const img = new Image(); img.src = screenshot.dataUrl; await new Promise(resolve => img.onload = resolve); // 绘制图片到 Canvas 的正确位置 ctx.drawImage(img, 0, screenshot.yOffset); } // 清除存储中的截图数据，避免下次打开时重复加载 await chrome.storage.local.remove('fullPageScreenshots'); // 可以选择将 Canvas 内容转换为图片并显示或提供下载 // 例如，直接显示在页面上，用户可以右键保存 // 或者提供一个下载按钮 // const finalDataUrl = canvas.toDataURL('image/png'); // const imgElement = document.createElement('img'); // imgElement.src = finalDataUrl; // document.body.appendChild(imgElement); } catch (error) { console.error("拼接截屏失败:", error); loadingText.textContent = `拼接截屏失败: ${error.message || '未知错误'}`; } }); </script> </body> </html>

评论收藏

内容反馈