// ==UserScript== // @name 网页图片采集器 // @namespace http://tampermonkey.net/ // @version v1.0 // @description 支持动态加载、智能去重、大图预览的网页图片下载工具 // @author YourName // @match *://*/* // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @grant GM_setClipboard // @grant GM_notification // @grant GM_download // @require https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js // @require https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js // @icon https://cdn-icons-png.flaticon.com/512/2107/2107957.png // @license MIT // ==/UserScript== (function() { 'use strict'; const CONFIG = { buttonSize: 30, activeColor: '#e74c3c', hoverColor: '#c0392b', zIndex: 99999, positionOffset: 25, touchDelay: 300, supportFormats: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'tiff'], maxPreviewSize: 50, loadTimeout: 5000, infoTruncateLength: 4, panelSafeMargin: '20px', panelMinSize: '320px', defaultImageFormat: 'png', fixedFontSize: '10px', scrollCheckInterval: 500, clickDetectDelay: 1500, clickLoadSelectors: [ '.load-more', '.load-btn', '.next-page', '.load-more-btn', '[data-action="load-more"]', '[class*="load"]', '[class*="more"]', '.pagination-next', '.next-btn', '.load-additional' ], maxBlobUrlCount: 100, blobCleanupNotification: true, previewZoom: { maxWidth: '90vw', maxHeight: '80vh', background: 'rgba(0,0,0,0.9)', closeButtonSize: '40px', headerHeight: '60px', footerHeight: '70px' }, deduplication: { enabled: true, similarityThreshold: 0.95, checkContent: true, maxFileSizeForCheck: 5 * 1024 * 1024, urlNormalization: true } }; GM_addStyle(` #svgSnifferModal, #svgSnifferModal * { font-size: ${CONFIG.fixedFontSize} !important; line-height: 1.4 !important; } .radar-container {position:fixed;z-index:${CONFIG.zIndex};cursor:move;transition:transform 0.2s;touch-action:none;} .radar-button {width:${CONFIG.buttonSize}px;height:${CONFIG.buttonSize}px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e74c3c,#922b21);box-shadow:0 6px 18px rgba(0,0,0,0.3),0 0 0 4px rgba(255,255,255,0.15),inset 0 0 12px rgba(0,0,0,0.3);cursor:pointer;border:none;outline:none;position:relative;overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;animation:pulse 2s infinite;transition:transform 0.3s,box-shadow 0.3s;} .radar-button:hover {transform:scale(1.05);box-shadow:0 8px 22px rgba(0,0,0,0.4),0 0 0 4px rgba(255,255,255,0.25),inset 0 0 15px rgba(0,0,0,0.4);} .radar-button:active {transform:scale(0.95);} .radar-icon {width:24px;height:24px;position:relative;display:flex;justify-content:center;align-items:center;filter:drop-shadow(0 0 2px rgba(255,255,255,0.5));animation:radar-scan 4s linear infinite;} .radar-icon svg {width:100%;height:100%;} #svgSnifferModal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: ${CONFIG.panelSafeMargin}; max-width: calc(100vw - 2 * ${CONFIG.panelSafeMargin}); max-height: calc(100vh - 2 * ${CONFIG.panelSafeMargin}); min-width: ${CONFIG.panelMinSize}; min-height: ${CONFIG.panelMinSize}; width: auto; height: auto; z-index: 10000; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); border: 1px solid #ddd; display: none; flex-direction: column; font-family: Arial, sans-serif; overflow: hidden; } .modal-header { padding: 12px 20px; background:linear-gradient(135deg,#e74c3c,#922b21); color: #fff; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .modal-header h2 {margin: 0; font-weight: 600;} .close-btn { background: none; border: none; color: #fff; font-size: 18px !important; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .close-btn:hover {background: rgba(255,255,255,0.2);} .action-bar { padding: 10px 20px; background: #f8f9fa; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; flex-wrap: wrap; gap: 10px; } .select-all-control { display: flex; align-items: center; gap: 8px; } .action-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .action-btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; white-space: nowrap; transition: all 0.2s; } .download-btn {background: #27ae60;color: #fff;} .download-btn:hover {background: #219653;transform: translateY(-2px);} .copy-btn {background: #2980b9;color: #fff;} .copy-btn:hover {background: #2573a7;transform: translateY(-2px);} .dedupe-control { display: flex; align-items: center; gap: 8px; margin-left: 10px; } .dedupe-toggle { width: 16px; height: 16px; cursor: pointer; } .dedupe-label { color: #666; font-size: 12px; white-space: nowrap; } .modal-content { padding: 15px; overflow-y: auto; flex-grow: 1; min-height: 0; } .svg-item { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #eee; transition: background 0.2s; justify-content: space-between; gap: 10px; min-width: 0; } .svg-item:hover {background: #f8fafc;} .svg-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; } .svg-preview { width: ${CONFIG.maxPreviewSize}px; height: ${CONFIG.maxPreviewSize}px; border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; border-radius: 6px; background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px; background-color: #f8f8f8; box-shadow: 0 2px 6px rgba(0,0,0,0.1); overflow: hidden; flex-shrink: 0; min-width: ${CONFIG.maxPreviewSize}px; min-height: ${CONFIG.maxPreviewSize}px; position: relative; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .svg-preview:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .svg-preview svg { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; max-width: ${CONFIG.maxPreviewSize}px !important; max-height: ${CONFIG.maxPreviewSize}px !important; } .svg-preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .svg-info { flex-grow: 1; min-width: 0; } .svg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2c3e50; margin-bottom: 3px; max-width: 80px; } .svg-meta { color: #6e6e73; display: flex; gap: 12px; flex-wrap: wrap; } .svg-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; } .item-download-btn { padding: 5px 10px; background: #e74c3c; color: #fff; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.2s; } .item-download-btn:hover {background: #c0392b;} .overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 9999;} #imagePreviewModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: ${CONFIG.previewZoom.background}; z-index: 100001; align-items: center; justify-content: center; backdrop-filter: blur(5px); } .preview-container { position: relative; width: ${CONFIG.previewZoom.maxWidth}; height: ${CONFIG.previewZoom.maxHeight}; display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .preview-header { width: 100%; height: ${CONFIG.previewZoom.headerHeight}; padding: 0 20px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; box-sizing: border-box; } .preview-title { font-weight: 600; color: #2c3e50; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 60px); } .preview-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6c757d; width: ${CONFIG.previewZoom.closeButtonSize}; height: ${CONFIG.previewZoom.closeButtonSize}; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } .preview-close:hover { background: #e9ecef; color: #495057; } .preview-content { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 20px; box-sizing: border-box; min-height: 0; } .preview-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } .preview-svg { max-width: 100%; max-height: 100%; border-radius: 8px; } .preview-footer { width: 100%; height: ${CONFIG.previewZoom.footerHeight}; padding: 0 20px; background: #f8f9fa; border-top: 1px solid #e9ecef; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; box-sizing: border-box; } .preview-btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; transition: all 0.2s; white-space: nowrap; } .preview-download { background: #27ae60; color: white; } .preview-download:hover { background: #219653; transform: translateY(-1px); } .preview-copy { background: #2980b9; color: white; } .preview-copy:hover { background: #2573a7; transform: translateY(-1px); } .loading {text-align: center;padding: 25px;color: #666;} .copy-notification { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); background: #27ae60; color: #fff; padding: 10px 20px; border-radius: 6px; z-index: 100000; opacity: 0; transition: opacity 0.5s; pointer-events: none; white-space: nowrap; font-weight: 500; } @keyframes radar-scan {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}} @keyframes pulse {0% {box-shadow: 0 0 0 0 rgba(231,76,60,0.6);} 70% {box-shadow: 0 0 0 12px rgba(231,76,60,0);} 100% {box-shadow: 0 0 0 0 rgba(231,76,60,0);}} .temp-visible-for-scan {display: block !important;visibility: visible !important;opacity: 1 !important;position: absolute !important;top: -9999px !important;left: -9999px !important;width: auto !important;height: auto !important;} `); const radarContainer = document.createElement('div'); radarContainer.className = 'radar-container'; radarContainer.id = 'radarContainer'; const radarButton = document.createElement('div'); radarButton.className = 'radar-button'; radarButton.id = 'radarButton'; radarButton.innerHTML = `

`; radarContainer.appendChild(radarButton); document.body.appendChild(radarContainer); const svgModal = document.createElement('div'); svgModal.id = 'svgSnifferModal'; svgModal.innerHTML = `

全选（共0张）

智能去重

`; document.body.appendChild(svgModal); const imagePreviewModal = document.createElement('div'); imagePreviewModal.id = 'imagePreviewModal'; imagePreviewModal.innerHTML = `

图片预览

加载中...

`; document.body.appendChild(imagePreviewModal); const overlay = document.createElement('div'); overlay.className = 'overlay'; document.body.appendChild(overlay); const copyNotification = document.createElement('div'); copyNotification.className = 'copy-notification'; document.body.appendChild(copyNotification); let globalImageItems = []; let imageItemCache = new Map(); let isDragging = false; let startX, startY, startLeft, startTop; let dragStartTime = 0; let touchTimer = null; let tempVisibleElements = []; let scrollTimer = null; let lastScrollHeight = document.documentElement.scrollHeight; let isClickDetecting = false; let blobUrlMap = new Map(); let currentPreviewItem = null; let imageSignatureMap = new Map(); function truncateTo4Bytes(text) { if (!text || typeof text !== 'string') return ''; let byteCount = 0; let result = ''; for (let i = 0; i < text.length; i++) { const char = text[i]; const charBytes = /[\u4e00-\u9fa5]/.test(char) ? 2 : 1; if (byteCount + charBytes > CONFIG.infoTruncateLength) break; result += char; byteCount += charBytes; if (byteCount === CONFIG.infoTruncateLength) break; } return result; } function completeImageSuffix(fileName, originalFormat) { const extMatch = fileName.match(/\.([^.]+)$/); const hasValidSuffix = extMatch ? CONFIG.supportFormats.includes(extMatch[1].toLowerCase()) : false; if (hasValidSuffix) return fileName; const targetFormat = (originalFormat && CONFIG.supportFormats.includes(originalFormat.toLowerCase())) ? originalFormat.toLowerCase() : CONFIG.defaultImageFormat; return fileName.endsWith('.') ? `${fileName}${targetFormat}` : `${fileName}.${targetFormat}`; } function processSVGForPreview(svgContent) { try { const parser = new DOMParser(); const doc = parser.parseFromString(svgContent, 'image/svg+xml'); const svgElement = doc.documentElement; svgElement.removeAttribute('width'); svgElement.removeAttribute('height'); const viewBox = svgElement.getAttribute('viewBox') || `0 0 ${CONFIG.maxPreviewSize} ${CONFIG.maxPreviewSize}`; svgElement.setAttribute('viewBox', viewBox); svgElement.setAttribute('style', 'width:100%;height:100%;object-fit:contain;'); return svgElement.outerHTML; } catch (error) { console.warn('SVG处理失败，使用原始内容:', error); return svgContent; } } function getFileExtension(url) { try { const path = new URL(url).pathname; const lastPart = path.split('/').pop(); const extMatch = lastPart.match(/\.([^.]+)$/); return extMatch ? extMatch[1].toLowerCase() : ''; } catch { return ''; } } function getImageName(url, altText) { if (altText && altText.trim()) return altText.trim(); try { const path = new URL(url).pathname; const fileName = path.split('/').pop().split('?')[0].split('#')[0]; return fileName || `未知图片-${Date.now().toString().slice(-6)}`; } catch { return `未知图片-${Date.now().toString().slice(-6)}`; } } function normalizeUrl(url) { try { const urlObj = new URL(url, window.location.href); const paramsToRemove = ['v', 'version', 'ts', 'timestamp', 't', 'time', 'width', 'height', 'size']; paramsToRemove.forEach(param => { if (urlObj.searchParams.has(param)) { urlObj.searchParams.delete(param); } }); return urlObj.href; } catch { return url; } } async function simpleHash(arrayBuffer) { const hashBuffer = await crypto.subtle.digest('SHA-1', arrayBuffer); const hashArray = Array.from(new Uint8Array(hashBuffer)); return hashArray.map(b => b.toString(16).padStart(2, '0')).join('').slice(0, 16); } async function generateContentSignature(url) { try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); const contentLength = response.headers.get('content-length'); if (contentLength && parseInt(contentLength) > CONFIG.deduplication.maxFileSizeForCheck) { return 'oversized'; } const blob = await response.blob(); const arrayBuffer = await blob.arrayBuffer(); const hash = await simpleHash(arrayBuffer); return `content-${hash}`; } catch (error) { return `error-${error.message}`; } } function normalizeSVGContent(svgContent) { if (!svgContent) return ''; try { const parser = new DOMParser(); const doc = parser.parseFromString(svgContent, 'image/svg+xml'); const svgElement = doc.documentElement; const attributesToRemove = ['id', 'class', 'style']; attributesToRemove.forEach(attr => { if (svgElement.hasAttribute(attr)) { svgElement.removeAttribute(attr); } }); const paths = svgElement.querySelectorAll('path'); paths.forEach(path => { if (path.hasAttribute('d')) { const d = path.getAttribute('d') .replace(/\s+/g, ' ') .replace(/([a-zA-Z])\s+/g, '$1') .trim(); path.setAttribute('d', d); } }); return svgElement.outerHTML; } catch (error) { console.warn('SVG标准化失败，使用原始内容:', error); return svgContent; } } async function generateImageSignature(imgItem) { const urlSignature = normalizeUrl(imgItem.url); if (CONFIG.deduplication.checkContent && !imgItem.url.startsWith('blob:') && !imgItem.url.startsWith('data:')) { try { const contentSignature = await generateContentSignature(imgItem.url); return `${urlSignature}|${contentSignature}`; } catch (error) { console.warn('内容签名生成失败，使用URL签名:', error); } } return urlSignature; } async function checkAndRemoveDuplicates(newImageItems) { if (!CONFIG.deduplication.enabled) { return newImageItems; } const uniqueItems = []; const seenSignatures = new Set(); for (const imgItem of newImageItems) { try { let signature; if (imgItem.format === 'svg' && imgItem.svgContent) { const normalizedContent = normalizeSVGContent(imgItem.svgContent); signature = await simpleHash(new TextEncoder().encode(normalizedContent)); signature = `svg-${signature}`; } else { signature = await generateImageSignature(imgItem); } if (!seenSignatures.has(signature)) { seenSignatures.add(signature); imageSignatureMap.set(imgItem.id, signature); uniqueItems.push(imgItem); } else { console.log('跳过重复图片:', imgItem.name, imgItem.url); } } catch (error) { console.warn('去重检查失败，保留图片:', imgItem.name, error); uniqueItems.push(imgItem); } } const removedCount = newImageItems.length - uniqueItems.length; if (removedCount > 0) { showNotification(`已自动过滤 ${removedCount} 张重复图片`, 'info'); } return uniqueItems; } function createImageItemElement(item) { const itemElement = document.createElement('div'); itemElement.className = 'svg-item'; const truncatedTitle = item.name; const fullName = item.originalName || truncatedTitle; const fullFormat = item.originalFormat || CONFIG.defaultImageFormat; const fullType = item.originalType || item.type; const completedFileName = completeImageSuffix(fullName, fullFormat); let previewHtml = ''; if (item.format === 'svg' && item.svgContent) { previewHtml = item.svgContent; } else { previewHtml = ` ${fullName}

`; } itemElement.innerHTML = `

${previewHtml}

${truncatedTitle}

格式: ${item.format} 类型: ${item.type}

`; const previewElement = itemElement.querySelector('.svg-preview'); previewElement.addEventListener('click', (e) => { e.stopPropagation(); const imgId = e.currentTarget.dataset.imgId; const imgItem = imageItemCache.get(imgId); if (imgItem) { showImagePreview(imgItem); } }); const itemDownloadBtn = itemElement.querySelector('.item-download-btn'); itemDownloadBtn.addEventListener('click', (e) => { e.stopPropagation(); const imgId = e.currentTarget.dataset.imgId; const imgItem = imageItemCache.get(imgId); if (imgItem) { downloadImage(imgItem, imgItem.originalName, imgItem.originalFormat); } }); return itemElement; } function showImagePreview(imgItem) { currentPreviewItem = imgItem; const modal = document.getElementById('imagePreviewModal'); const title = document.getElementById('previewTitle'); const content = document.getElementById('previewContent'); const downloadBtn = document.getElementById('previewDownload'); const copyBtn = document.getElementById('previewCopy'); const closeBtn = modal.querySelector('.preview-close'); const completedFileName = completeImageSuffix(imgItem.originalName || imgItem.name, imgItem.originalFormat); title.textContent = completedFileName; content.innerHTML = '

加载中...

'; modal.style.display = 'flex'; // 修复：正确定义预览内容，移除原错误的imgInfo变量引用 let previewContent = ''; if (imgItem.format === 'svg' && imgItem.svgContent) { const processedSvg = processSVGForPreview(imgItem.svgContent); previewContent = `

${processedSvg}

`; } else { previewContent = ` ${completedFileName}

`; } content.innerHTML = previewContent; downloadBtn.onclick = () => { downloadImage(imgItem, imgItem.originalName, imgItem.originalFormat); }; // 修复：优化复制逻辑，补充异常捕获，确保URL正确传递 previewCopy.onclick = async () => { if (!currentPreviewItem || !currentPreviewItem.url) { showNotification('复制失败：图片URL不存在', 'error'); return; } try { let urlToCopy = currentPreviewItem.url; // 对于SVG内容，创建blob URL if (currentPreviewItem.format === 'svg' && currentPreviewItem.svgContent) { const svgBlob = new Blob([currentPreviewItem.svgContent], { type: 'image/svg+xml' }); urlToCopy = createManagedBlobUrl(svgBlob); } // 使用更可靠的复制方法 if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(urlToCopy); } else { // 使用备用方法 const textArea = document.createElement('textarea'); textArea.value = urlToCopy; textArea.style.position = 'fixed'; textArea.style.left = '-999999px'; textArea.style.top = '-999999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); const successful = document.execCommand('copy'); document.body.removeChild(textArea); if (!successful) { throw new Error('execCommand 复制失败'); } } showNotification('图片链接已成功复制到剪贴板', 'success'); } catch (error) { console.error('预览窗口复制链接失败:', error); showNotification('复制失败，请重试', 'error'); } }; closeBtn.onclick = () => { modal.style.display = 'none'; currentPreviewItem = null; }; modal.onclick = (e) => { if (e.target === modal) { modal.style.display = 'none'; currentPreviewItem = null; } }; // 修复：确保键盘事件正确绑定与移除 const handleEscape = function(e) { if (e.key === 'Escape') { modal.style.display = 'none'; currentPreviewItem = null; document.removeEventListener('keydown', handleEscape); } }; document.addEventListener('keydown', handleEscape); } async function detectNewImages() { const modal = document.getElementById('svgSnifferModal'); const svgList = document.getElementById('svgList'); const imageCountEl = document.getElementById('imageCount'); if (modal.style.display !== 'flex') return; const processedUrls = new Set(globalImageItems.map(item => item.url)); const newImageItems = []; tempShowHiddenElements(); try { const imgElements = document.querySelectorAll('img'); for (const img of imgElements) { try { let imgUrl = img.src || img.dataset.src || img.dataset.original || img.currentSrc; if (!imgUrl || processedUrls.has(imgUrl) || imgUrl.startsWith('data:')) continue; const fullUrl = new URL(imgUrl, window.location.href).href; const originalFormat = getFileExtension(fullUrl).toLowerCase(); if (!CONFIG.supportFormats.includes(originalFormat) && originalFormat) continue; if (processedUrls.has(fullUrl)) continue; const originalName = getImageName(fullUrl, img.alt); const truncatedName = truncateTo4Bytes(originalName); const truncatedFormat = truncateTo4Bytes(originalFormat || CONFIG.defaultImageFormat); let svgContent = ''; if (originalFormat === 'svg') { try { const svgResponse = await fetch(fullUrl); if (svgResponse.ok) svgContent = await svgResponse.text(); } catch (svgErr) { console.warn('获取新SVG内容失败:', svgErr); } } const imgInfo = await new Promise((resolve) => { if (img.complete) { resolve({ id: `dynamic-img-${Date.now()}-${Math.random().toString(36).slice(2)}`, url: fullUrl, name: truncatedName, format: truncatedFormat, width: img.naturalWidth || img.width || '未知', height: img.naturalHeight || img.height || '未知', type: 'dynamic-img', preview: fullUrl, originalName: originalName, originalFormat: originalFormat, svgContent: svgContent }); } else { img.onload = () => { resolve({ id: `dynamic-img-${Date.now()}-${Math.random().toString(36).slice(2)}`, url: fullUrl, name: truncatedName, format: truncatedFormat, width: img.naturalWidth || img.width || '未知', height: img.naturalHeight || img.height || '未知', type: 'dynamic-img', preview: fullUrl, originalName: originalName, originalFormat: originalFormat, svgContent: svgContent }); }; img.onerror = () => resolve(null); } }); if (imgInfo) { processedUrls.add(imgUrl); newImageItems.push(imgInfo); } } catch (e) { console.warn('动态采集标签失败:', e); } } const elementsWithBg = document.querySelectorAll('*'); for (const el of elementsWithBg) { try { const bgStyle = window.getComputedStyle(el).backgroundImage; if (!bgStyle || bgStyle === 'none' || processedUrls.has(bgStyle)) continue; const bgUrls = bgStyle.match(/url$["']?([^"']+)["']?$/g); if (!bgUrls) continue; for (const bgUrl of bgUrls) { try { const match = bgUrl.match(/url$["']?([^"']+)["']?$/); if (!match || !match[1]) continue; let imgUrl = match[1]; if (processedUrls.has(imgUrl)) continue; const fullUrl = new URL(imgUrl, window.location.href).href; const originalFormat = getFileExtension(fullUrl).toLowerCase(); let svgContent = ''; if (originalFormat === 'svg') { try { const svgResponse = await fetch(fullUrl); if (svgResponse.ok) svgContent = await svgResponse.text(); } catch (svgErr) { console.warn('获取动态背景SVG内容失败:', svgErr); } } const originalName = `动态背景图-${el.tagName.toLowerCase()}-${Date.now().toString().slice(-4)}`; const truncatedName = truncateTo4Bytes(originalName); const truncatedFormat = truncateTo4Bytes(originalFormat || CONFIG.defaultImageFormat); const truncatedType = truncateTo4Bytes('动态背景'); const imgInfo = { id: `dynamic-bg-${Date.now()}-${Math.random().toString(36).slice(2)}`, url: fullUrl, name: truncatedName, format: truncatedFormat, width: '动态背景', height: '动态背景', type: truncatedType, preview: fullUrl, originalName: originalName, originalFormat: originalFormat, originalType: '动态背景图', svgContent: svgContent }; processedUrls.add(imgUrl); newImageItems.push(imgInfo); } catch (e) { console.warn('动态采集背景图失败:', e); } } } catch (e) { console.warn('处理动态背景图样式失败:', e); } } if (newImageItems.length > 0) { const uniqueNewItems = await checkAndRemoveDuplicates(newImageItems); const finalNewItems = uniqueNewItems.filter(newItem => { return !globalImageItems.some(existingItem => imageSignatureMap.get(existingItem.id) === imageSignatureMap.get(newItem.id) ); }); if (finalNewItems.length > 0) { globalImageItems.push(...finalNewItems); finalNewItems.forEach(item => { imageItemCache.set(item.id, item); }); imageCountEl.textContent = globalImageItems.length; const fragment = document.createDocumentFragment(); finalNewItems.forEach(item => { fragment.appendChild(createImageItemElement(item)); }); svgList.appendChild(fragment); showNotification(`发现新图片：${finalNewItems.length}张`, 'success'); } } lastScrollHeight = document.documentElement.scrollHeight; } catch (error) { console.error('动态图片采集失败:', error); showNotification('动态图片采集失败', 'error'); } finally { restoreHiddenElements(); } } function handleScroll() { clearTimeout(scrollTimer); scrollTimer = setTimeout(() => { const currentScrollHeight = document.documentElement.scrollHeight; if (currentScrollHeight > lastScrollHeight) { detectNewImages(); } }, CONFIG.scrollCheckInterval); } function handleClick(e) { if (e.target.closest('#radarContainer') || e.target.closest('#svgSnifferModal')) { return; } const isLoadButton = CONFIG.clickLoadSelectors.some(selector => { return e.target.closest(selector); }); if (isLoadButton && !isClickDetecting) { isClickDetecting = true; setTimeout(async () => { try { await detectNewImages(); } finally { isClickDetecting = false; } }, CONFIG.clickDetectDelay); } } function initDynamicLoadListeners() { window.addEventListener('scroll', handleScroll, { passive: true }); document.addEventListener('click', handleClick, true); } function createManagedBlobUrl(blob) { const blobUrl = URL.createObjectURL(blob); const now = Date.now(); blobUrlMap.set(blobUrl, now); if (blobUrlMap.size > CONFIG.maxBlobUrlCount) { const sortedUrls = Array.from(blobUrlMap.entries()).sort((a, b) => a[1] - b[1]); const urlsToClean = sortedUrls.slice(0, blobUrlMap.size - CONFIG.maxBlobUrlCount); urlsToClean.forEach(([url]) => { cleanupSingleBlobUrl(url); }); if (CONFIG.blobCleanupNotification) { showNotification(`Blob URL超限，已清理${urlsToClean.length}个历史URL`, 'info'); } } return blobUrl; } function cleanupSingleBlobUrl(url) { if (blobUrlMap.has(url)) { try { URL.revokeObjectURL(url); blobUrlMap.delete(url); } catch (error) { console.warn('清理Blob URL失败:', url, error); } } } function cleanupBlobUrls() { blobUrlMap.forEach((_, url) => { cleanupSingleBlobUrl(url); }); blobUrlMap.clear(); if (CONFIG.blobCleanupNotification) { showNotification('已清理所有Blob URL', 'info'); } } function collectBasicImages() { const images = []; const imgElements = document.querySelectorAll('img'); imgElements.forEach((img, index) => { const src = img.src || img.dataset.src || img.currentSrc; if (src && !src.startsWith('data:')) { const truncatedName = truncateTo4Bytes(img.alt || '未命名图片'); const originalFormat = getFileExtension(src).toLowerCase(); const format = truncateTo4Bytes(originalFormat || CONFIG.defaultImageFormat); images.push({ id: `basic-img-${index}`, url: src, name: truncatedName, format: format, width: img.naturalWidth || img.width || '未知', height: img.naturalHeight || img.height || '未知', type: 'img-tag', preview: src, element: img, originalName: img.alt || '未命名图片', originalFormat: originalFormat, svgContent: '' }); } }); return images; } async function collectImagesFromCss(cssUrl) { const imageUrls = []; try { const response = await fetch(cssUrl, { headers: { 'Accept': 'text/css,*/*;q=0.1' }, credentials: 'same-origin' }); if (!response.ok) throw new Error(`CSS请求失败: ${response.status}`); const cssText = await response.text(); const bgUrlRegex = /background-image\s*:\s*url$["']?([^"']+)["']?$/gi; let match; while ((match = bgUrlRegex.exec(cssText)) !== null) { if (match[1]) { const fullUrl = new URL(match[1], cssUrl).href; const ext = getFileExtension(fullUrl).toLowerCase(); if (CONFIG.supportFormats.includes(ext)) { imageUrls.push(fullUrl); } } } } catch (e) { console.warn('采集CSS中的图片失败:', cssUrl, e); } return imageUrls; } async function collectAllCssResources() { const cssUrls = []; const linkElements = document.querySelectorAll('link[rel="stylesheet"]'); linkElements.forEach(link => { const href = link.getAttribute('href'); if (href) cssUrls.push(new URL(href, window.location.href).href); }); const styleElements = document.querySelectorAll('style'); styleElements.forEach(style => { const bgUrlRegex = /background-image\s*:\s*url$["']?([^"']+)["']?$/gi; let match; while ((match = bgUrlRegex.exec(style.textContent)) !== null) { if (match[1]) { const fullUrl = new URL(match[1], window.location.href).href; const ext = getFileExtension(fullUrl).toLowerCase(); if (CONFIG.supportFormats.includes(ext)) { cssUrls.push(`inline:${fullUrl}`); } } } }); const allImageUrls = []; for (const cssUrl of cssUrls) { if (cssUrl.startsWith('inline:')) { allImageUrls.push(cssUrl.replace('inline:', '')); } else { const imagesFromCss = await collectImagesFromCss(cssUrl); allImageUrls.push(...imagesFromCss); } } return allImageUrls; } async function collectImages() { const imageItems = []; const processedUrls = new Set(); let cssImageUrls = []; const basicImages = collectBasicImages(); basicImages.forEach(img => { if (!processedUrls.has(img.url)) { processedUrls.add(img.url); imageItems.push(img); } }); try { cssImageUrls = await collectAllCssResources(); } catch (e) { console.warn('CSS图片采集异常:', e); } tempShowHiddenElements(); try { const imgElements = document.querySelectorAll('img'); for (const img of imgElements) { try { let imgUrl = img.src || img.dataset.src || img.dataset.original || img.currentSrc; if (!imgUrl || processedUrls.has(imgUrl) || imgUrl.startsWith('data:')) continue; const fullUrl = new URL(imgUrl, window.location.href).href; const originalFormat = getFileExtension(fullUrl).toLowerCase(); if (!CONFIG.supportFormats.includes(originalFormat) && originalFormat) continue; if (processedUrls.has(fullUrl)) continue; const originalName = getImageName(fullUrl, img.alt); const truncatedName = truncateTo4Bytes(originalName); const truncatedFormat = truncateTo4Bytes(originalFormat || CONFIG.defaultImageFormat); let svgContent = ''; if (originalFormat === 'svg') { try { const svgResponse = await fetch(fullUrl); if (svgResponse.ok) svgContent = await svgResponse.text(); } catch (svgErr) { console.warn('获取SVG原始内容失败:', svgErr); } } const imgInfo = await new Promise((resolve) => { const timer = setTimeout(() => { resolve({ id: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`, url: fullUrl, name: truncatedName, format: truncatedFormat, width: img.width || '未知', height: img.height || '未知', type: 'img-tag', preview: fullUrl, originalName: originalName, originalFormat: originalFormat, svgContent: svgContent }); }, CONFIG.loadTimeout); if (img.complete) { clearTimeout(timer); resolve({ id: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`, url: fullUrl, name: truncatedName, format: truncatedFormat, width: img.naturalWidth || img.width || '未知', height: img.naturalHeight || img.height || '未知', type: 'img-tag', preview: fullUrl, originalName: originalName, originalFormat: originalFormat, svgContent: svgContent }); } else { img.onload = () => { clearTimeout(timer); resolve({ id: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`, url: fullUrl, name: truncatedName, format: truncatedFormat, width: img.naturalWidth || img.width || '未知', height: img.naturalHeight || img.height || '未知', type: 'img-tag', preview: fullUrl, originalName: originalName, originalFormat: originalFormat, svgContent: svgContent }); }; img.onerror = () => { clearTimeout(timer); resolve(null); }; } }); if (imgInfo) { processedUrls.add(imgUrl); imageItems.push(imgInfo); } } catch (e) { console.warn('采集标签失败:', e); } } const elementsWithBg = document.querySelectorAll('*'); for (const el of elementsWithBg) { try { const bgStyle = window.getComputedStyle(el).backgroundImage; if (!bgStyle || bgStyle === 'none' || processedUrls.has(bgStyle)) continue; const bgUrls = bgStyle.match(/url$["']?([^"']+)["']?$/g); if (!bgUrls) continue; for (const bgUrl of bgUrls) { try { const match = bgUrl.match(/url$["']?([^"']+)["']?$/); if (!match || !match[1]) continue; let imgUrl = match[1]; if (processedUrls.has(imgUrl)) continue; const fullUrl = new URL(imgUrl, window.location.href).href; const originalFormat = getFileExtension(fullUrl).toLowerCase(); let svgContent = ''; if (originalFormat === 'svg') { try { const svgResponse = await fetch(fullUrl); if (svgResponse.ok) svgContent = await svgResponse.text(); } catch (svgErr) { console.warn('获取背景SVG内容失败:', svgErr); } } const originalName = `背景图-${el.tagName.toLowerCase()}-${Date.now().toString().slice(-4)}`; const truncatedName = truncateTo4Bytes(originalName); const truncatedFormat = truncateTo4Bytes(originalFormat || CONFIG.defaultImageFormat); const truncatedType = truncateTo4Bytes('背景图'); const imgInfo = { id: `bg-${Date.now()}-${Math.random().toString(36).slice(2)}`, url: fullUrl, name: truncatedName, format: truncatedFormat, width: '背景图', height: '背景图', type: truncatedType, preview: fullUrl, originalName: originalName, originalFormat: originalFormat, originalType: '背景图', svgContent: svgContent }; processedUrls.add(imgUrl); imageItems.push(imgInfo); } catch (e) { console.warn('采集背景图失败:', e); } } } catch (e) { console.warn('处理背景图样式失败:', e); } } for (const imgUrl of cssImageUrls) { try { if (!imgUrl || processedUrls.has(imgUrl)) continue; const fullUrl = new URL(imgUrl, window.location.href).href; const originalFormat = getFileExtension(fullUrl).toLowerCase(); let svgContent = ''; if (originalFormat === 'svg') { try { const svgResponse = await fetch(fullUrl); if (svgResponse.ok) svgContent = await svgResponse.text(); } catch (svgErr) { console.warn('获取CSS SVG内容失败:', svgErr); } } const originalName = `CSS图片-${Date.now().toString().slice(-4)}`; const truncatedName = truncateTo4Bytes(originalName); const truncatedFormat = truncateTo4Bytes(originalFormat || CONFIG.defaultImageFormat); const truncatedType = truncateTo4Bytes('CSS图片'); const imgInfo = { id: `css-${Date.now()}-${Math.random().toString(36).slice(2)}`, url: fullUrl, name: truncatedName, format: truncatedFormat, width: 'CSS引用', height: 'CSS引用', type: truncatedType, preview: fullUrl, originalName: originalName, originalFormat: originalFormat, originalType: 'CSS图片', svgContent: svgContent }; processedUrls.add(imgUrl); imageItems.push(imgInfo); } catch (e) { console.warn('采集CSS图片失败:', e); } } const svgElements = document.querySelectorAll('svg'); for (const svg of svgElements) { try { const svgId = `svg-${Date.now()}-${Math.random().toString(36).slice(2)}`; const svgContent = svg.outerHTML; const processedSvgContent = processSVGForPreview(svgContent); const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' }); const svgUrl = createManagedBlobUrl(svgBlob); const originalName = `SVG图片-${Date.now().toString().slice(-4)}`; const truncatedName = truncateTo4Bytes(originalName); const truncatedFormat = truncateTo4Bytes('svg'); const truncatedType = truncateTo4Bytes('SVG标签'); const imgInfo = { id: svgId, url: svgUrl, name: truncatedName, format: truncatedFormat, width: svg.naturalWidth || svg.width.baseVal.value || '自适应', height: svg.naturalHeight || svg.height.baseVal.value || '自适应', type: truncatedType, preview: svgUrl, svgContent: svgContent, originalName: originalName, originalFormat: 'svg', originalType: 'SVG标签' }; imageItems.push(imgInfo); } catch (e) { console.warn('采集SVG标签失败:', e); } } } catch (e) { console.error('图片采集主流程异常:', e); } finally { restoreHiddenElements(); } return await checkAndRemoveDuplicates(imageItems); } function initRadarButton() { const domain = location.hostname.replace(/\./g, '-'); const positionKey = `radarPosition_${domain}`; const savedPosition = GM_getValue(positionKey); if (savedPosition) { radarContainer.style.left = `${savedPosition.x}px`; radarContainer.style.top = `${savedPosition.y}px`; } else { radarContainer.style.right = `${CONFIG.positionOffset}px`; radarContainer.style.bottom = `${CONFIG.positionOffset}px`; } radarContainer.addEventListener('mousedown', startDrag); radarContainer.addEventListener('touchstart', startDrag, { passive: false }); radarButton.addEventListener('click', (e) => { if (!isDragging && Date.now() - dragStartTime > CONFIG.touchDelay) { showImageList(); } }); } function startDrag(e) { e.preventDefault(); const clientX = e.clientX || e.touches[0].clientX; const clientY = e.clientY || e.touches[0].clientY; const computedStyle = window.getComputedStyle(radarContainer); startLeft = parseInt(computedStyle.left) || 0; startTop = parseInt(computedStyle.top) || 0; if (computedStyle.right !== 'auto') { const rightPos = parseInt(computedStyle.right); startLeft = window.innerWidth - rightPos - CONFIG.buttonSize; radarContainer.style.right = 'auto'; radarContainer.style.left = `${startLeft}px`; } startX = clientX; startY = clientY; dragStartTime = Date.now(); if (e.type === 'touchstart') { touchTimer = setTimeout(() => { isDragging = true; radarContainer.style.transition = 'none'; }, CONFIG.touchDelay); } else { isDragging = true; radarContainer.style.transition = 'none'; } document.addEventListener('mousemove', drag); document.addEventListener('touchmove', drag, { passive: false }); document.addEventListener('mouseup', endDrag); document.addEventListener('touchend', endDrag); } function drag(e) { if (!isDragging) return; e.preventDefault(); const clientX = e.clientX || e.touches[0].clientX; const clientY = e.clientY || e.touches[0].clientY; const dx = clientX - startX; const dy = clientY - startY; radarContainer.style.left = `${startLeft + dx}px`; radarContainer.style.top = `${startTop + dy}px`; radarContainer.style.right = 'auto'; } function endDrag(e) { if (touchTimer) { clearTimeout(touchTimer); touchTimer = null; } if (!isDragging) { if (Date.now() - dragStartTime < CONFIG.touchDelay) { showImageList(); } return; } isDragging = false; radarContainer.style.transition = ''; document.removeEventListener('mousemove', drag); document.removeEventListener('touchmove', drag); document.removeEventListener('mouseup', endDrag); document.removeEventListener('touchend', endDrag); const domain = location.hostname.replace(/\./g, '-'); const positionKey = `radarPosition_${domain}`; const rect = radarContainer.getBoundingClientRect(); GM_setValue(positionKey, { x: rect.left, y: rect.top }); } function tempShowHiddenElements() { tempVisibleElements = []; const hiddenSelectors = [ 'div[style*="display:none"]', 'div[style*="visibility:hidden"]', 'div[style*="opacity:0"]', '.errorpage[style*="display:none"]', '[class*="hidden"]', '[hidden]' ]; hiddenSelectors.forEach(selector => { const elements = document.querySelectorAll(selector); elements.forEach(el => { const originalStyle = { display: el.style.display, visibility: el.style.visibility, opacity: el.style.opacity, position: el.style.position, top: el.style.top, left: el.style.left, width: el.style.width, height: el.style.height, className: el.className }; tempVisibleElements.push({ el, originalStyle }); el.classList.add('temp-visible-for-scan'); el.style.display = ''; el.style.visibility = ''; el.style.opacity = ''; }); }); } function restoreHiddenElements() { tempVisibleElements.forEach(({ el, originalStyle }) => { el.classList.remove('temp-visible-for-scan'); el.style.display = originalStyle.display; el.style.visibility = originalStyle.visibility; el.style.opacity = originalStyle.opacity; el.style.position = originalStyle.position; el.style.top = originalStyle.top; el.style.left = originalStyle.left; el.style.width = originalStyle.width; el.style.height = originalStyle.height; el.className = originalStyle.className; }); tempVisibleElements = []; } async function showImageList() { const modal = document.getElementById('svgSnifferModal'); const svgList = document.getElementById('svgList'); const imageCountEl = document.getElementById('imageCount'); svgList.innerHTML = '

正在扫描页面图片资源（含CSS/隐藏元素/动态加载/智能去重）...

'; modal.style.display = 'flex'; overlay.style.display = 'block'; try { const imageItems = await collectImages(); globalImageItems = imageItems; imageItemCache.clear(); imageSignatureMap.clear(); imageCountEl.textContent = imageItems.length; imageItems.forEach(item => { imageItemCache.set(item.id, item);}); if (imageItems.length === 0) { svgList.innerHTML = '

没有找到任何图片资源（已尝试采集隐藏元素、CSS和动态加载）

'; return; } svgList.innerHTML = ''; const fragment = document.createDocumentFragment(); imageItems.forEach(item => { fragment.appendChild(createImageItemElement(item)); }); svgList.appendChild(fragment); setupModalEvents(); } catch (error) { console.error('扫描图片失败:', error); svgList.innerHTML = '

'; } } function setupModalEvents() { const modal = document.getElementById('svgSnifferModal'); const closeBtn = modal.querySelector('.close-btn'); const overlay = document.querySelector('.overlay'); const selectAllCheckbox = document.getElementById('selectAll'); const batchDownloadBtn = document.getElementById('batchDownloadBtn'); const copyBtn = modal.querySelector('.copy-btn'); const dedupeToggle = document.getElementById('dedupeToggle'); closeBtn.addEventListener('click', () => { modal.style.display = 'none'; overlay.style.display = 'none'; cleanupBlobUrls(); }); overlay.addEventListener('click', () => { modal.style.display = 'none'; overlay.style.display = 'none'; cleanupBlobUrls(); }); selectAllCheckbox.addEventListener('change', (e) => { const checkboxes = modal.querySelectorAll('.svg-checkbox'); checkboxes.forEach(checkbox => { checkbox.checked = e.target.checked; }); }); batchDownloadBtn.addEventListener('click', () => { const checkboxes = modal.querySelectorAll('.svg-checkbox:checked'); const selectedIds = Array.from(checkboxes).map(cb => cb.dataset.id); const selectedItems = selectedIds.map(id => imageItemCache.get(id)).filter(Boolean); if (selectedItems.length === 0) { alert('请至少选择一张图片'); return; } if (selectedItems.length === 1) { const item = selectedItems[0]; downloadImage(item, item.originalName, item.originalFormat); } else { downloadMultipleImages(selectedItems); } }); // 修复列表面板复制链接功能 copyBtn.addEventListener('click', async () => { const checkboxes = modal.querySelectorAll('.svg-checkbox:checked'); const selectedIds = Array.from(checkboxes).map(cb => cb.dataset.id); const selectedItems = selectedIds.map(id => imageItemCache.get(id)).filter(Boolean); if (selectedItems.length === 0) { showNotification('请至少选择一张图片', 'warning'); return; } try { // 收集所有选中的图片URL const urls = selectedItems.map(item => { // 对于SVG内容，需要特殊处理 if (item.format === 'svg' && item.svgContent) { // 创建blob URL用于SVG const svgBlob = new Blob([item.svgContent], { type: 'image/svg+xml' }); const blobUrl = createManagedBlobUrl(svgBlob); return blobUrl; } return item.url; }); const urlsText = urls.join('\n'); // 使用更可靠的复制方法 if (navigator.clipboard && window.isSecureContext) { // 使用现代 Clipboard API await navigator.clipboard.writeText(urlsText); } else { // 使用备用方法 const textArea = document.createElement('textarea'); textArea.value = urlsText; textArea.style.position = 'fixed'; textArea.style.left = '-999999px'; textArea.style.top = '-999999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); const successful = document.execCommand('copy'); document.body.removeChild(textArea); if (!successful) { throw new Error('execCommand 复制失败'); } } showNotification(`成功复制 ${selectedItems.length} 个图片链接到剪贴板`, 'success'); } catch (error) { console.error('复制链接失败:', error); showNotification('复制失败，请手动选择链接', 'error'); // 提供备选方案：显示链接让用户手动复制 const urlsText = selectedItems.map(item => item.url).join('\n'); const tempTextArea = document.createElement('textarea'); tempTextArea.value = urlsText; tempTextArea.style.width = '300px'; tempTextArea.style.height = '150px'; tempTextArea.style.position = 'fixed'; tempTextArea.style.top = '50%'; tempTextArea.style.left = '50%'; tempTextArea.style.transform = 'translate(-50%, -50%)'; tempTextArea.style.zIndex = '1000000'; document.body.appendChild(tempTextArea); setTimeout(() => { tempTextArea.select(); setTimeout(() => { document.body.removeChild(tempTextArea); }, 3000); }, 100); } }); if (dedupeToggle) { dedupeToggle.addEventListener('change', (e) => { CONFIG.deduplication.enabled = e.target.checked; showNotification(`智能去重 ${e.target.checked ? '已启用' : '已禁用'}`, 'info'); }); } } function downloadImage(imgItem, originalName, originalFormat) { const baseName = originalName || imgItem.name; const completedFileName = completeImageSuffix(baseName, originalFormat); if (completedFileName.endsWith('.svg') && imgItem.svgContent) { try { const svgContent = `${imgItem.svgContent}`; const blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' }); saveAs(blob, completedFileName); showNotification(`下载成功: ${completedFileName}`, 'success'); return; } catch (svgErr) { console.warn('SVG专属下载失败，尝试备用方案:', svgErr); } } const mimeType = completedFileName.endsWith('.svg') ? 'image/svg+xml' : `image/${completedFileName.split('.').pop().toLowerCase()}`; GM_download({ url: imgItem.url, name: completedFileName, mimetype: mimeType, onload: () => { showNotification(`下载成功: ${completedFileName}`, 'success'); }, onerror: (e) => { console.error('下载失败:', e); showNotification(`下载失败: ${completedFileName}`, 'error'); } }); } async function downloadMultipleImages(selectedItems) { const zip = new JSZip(); let downloadedCount = 0; const totalCount = selectedItems.length; for (const imgItem of selectedItems) { try { const baseName = imgItem.originalName || imgItem.name; const originalFormat = imgItem.originalFormat || ''; const completedFileName = completeImageSuffix(baseName, originalFormat); if (completedFileName.endsWith('.svg') && imgItem.svgContent) { const svgContent = `${imgItem.svgContent}`; zip.file(completedFileName, svgContent); downloadedCount++; continue; } const response = await fetch(imgItem.url); if (!response.ok) throw new Error(`HTTP ${response.status}`); const blob = await response.blob(); zip.file(completedFileName, blob); downloadedCount++; } catch (error) { const errBaseName = imgItem.originalName || imgItem.name; const errFileName = completeImageSuffix(`${errBaseName}_加载失败`, 'txt'); zip.file(errFileName, `图片加载失败: ${imgItem.url}\n错误原因: ${error.message}`); console.error(`下载失败 ${errBaseName}:`, error); } } if (downloadedCount === 0) { alert('所有图片下载失败'); return; } try { const content = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE', compressionOptions: { level: 6 } }); const zipFileName = `网页图片_${location.hostname}_${new Date().toISOString().slice(0, 10)}.zip`; saveAs(content, zipFileName); showNotification(`批量下载成功: ${zipFileName}（共${downloadedCount}/${totalCount}个）`, 'success'); if (downloadedCount < totalCount) { alert(`部分图片下载失败，成功下载 ${downloadedCount}/${totalCount} 个资源`); } } catch (error) { console.error('创建ZIP失败:', error); showNotification('创建ZIP文件失败', 'error'); alert('创建ZIP文件失败'); } } function showNotification(message, type = 'info') { const colors = { info: '#3498db', success: '#27ae60', warning: '#f39c12', error: '#e74c3c' }; copyNotification.textContent = message; copyNotification.style.backgroundColor = colors[type] || colors.info; copyNotification.style.opacity = '1'; setTimeout(() => { copyNotification.style.opacity = '0'; }, 3000); } window.addEventListener('beforeunload', () => { cleanupBlobUrls(); window.removeEventListener('scroll', handleScroll); document.removeEventListener('click', handleClick, true); clearTimeout(scrollTimer); if (touchTimer) clearTimeout(touchTimer); }); function initAllFeatures() { initRadarButton(); initDynamicLoadListeners(); } initAllFeatures(); })();

网页图片资源列表（支持动态加载与智能去重）