Descargador masivo de imágenes web

Extrae por lotes imágenes en formatos específicos de páginas web; admite filtrado por tamaño, cambio de nombre, empaquetado en ZIP y descarga mediante enlaces.

Informe de error

Modo de ejecución en navegador: Tus datos se procesan en tu navegador y no se suben al servidor.

Velocidad y estabilidad: La velocidad de procesamiento depende de tu dispositivo y navegador. Para lotes grandes, la versión de escritorio puede ser más estable.

Cargando herramienta, espera...

Si la herramienta en línea no carga o no se ejecuta, prueba la herramienta de escritorio. https://tools.yikeaigc.com/

Uso de herramientas

Volver a la versión anterior

Configura origen y filtros, luego analiza, previsualiza y descarga.

Admite URL web, código HTML, archivos HTML locales y listas de enlaces directos de imágenes. En entradas por lotes solo se muestran los primeros 20 elementos; la descarga y exportación procesan todos los resultados.

img / srcset Imágenes de fondo CSS Filtro de tamaño Empaquetado ZIP Ajustes guardables

Archivo HTML local Ningún archivo seleccionado

Tras elegir varios archivos HTML, aquí se muestran los primeros 20 nombres; al analizar se procesarán todos.

Elige el origen de entrada

Primero define de dónde extraer las imágenes. Al capturar una web, el proxy se activa por defecto; si el sitio limita el acceso, pega HTML o usa un archivo HTML local.

URL de una páginaExtraer imágenes de una página URL web por lotesUna dirección por línea Pegar HTMLIdeal para páginas con restricciones CORS Archivo HTML localImportación por lotes Lista de URL de imágenesDescarga y empaquetado de enlaces directos

URL web Se recomienda introducir primero la URL y luego configurar formato y tamaño en el siguiente paso.

Configurar procesamiento y descarga

Se recomienda mantener la plantilla de nombre predeterminada para conservar el nombre original; si se repite, se añadirá un número.

Nombre y descargaSe aplica al descargar o empaquetar

Regla de renombradoDisponibles: {index} {name} {ext} {host} {domain} {page} {source} {width} {height} {width}x{height} {date}

Ordenar

Estrategia de descarga

Usar proxy del servidor al extraer páginas/imágenes Extraer imágenes de CSS externo y @import Detectar imágenes sin extensión o con parámetros

IniciarCompleta primero origen y filtros

Vista previa y descarga de resultados

El área de resultados solo muestra algunas vistas previas; ZIP, lista de URL, CSV y JSON incluirán todos los resultados extraídos.

Descarga y exportaciónAnaliza primero los resultados y luego haz clic en descargar

', '' ].join('\n'); updateStatus('已载入示例HTML，可继续设置筛选后解析。'); } function loadSampleUrls() { setInputMode('image-urls'); qs('#input-image-urls').value = [ '/android-chrome-192x192.png', '/android-chrome-512x512.png', '/apple-touch-icon.png', '/favicon-32x32.png', '/assets/logo.png' ].map(path => new URL(path, location.href).href).join('\n'); updateStatus('已载入示例图片URL，可直接解析或调整筛选。'); } function collectSettings() { const settings = {}; qsa('input, select, textarea').forEach(el => { if (!el.id || el.type === 'file') return; if (el.type === 'checkbox' || el.type === 'radio') settings[el.id] = el.checked; else settings[el.id] = el.value; }); return settings; } function saveSettings() { try { localStorage.setItem(SETTINGS_KEY, JSON.stringify(collectSettings())); updateStatus('设置已保存。'); } catch (e) { updateStatus('设置保存失败：浏览器存储不可用。'); } } function restoreSettings() { let raw = ''; try { raw = localStorage.getItem(SETTINGS_KEY) || ''; } catch (e) { raw = ''; } if (!raw) { showPanel('single-url'); return; } try { const settings = JSON.parse(raw); Object.keys(settings).forEach(id => { const el = document.getElementById(id); if (!el || !root.contains(el)) return; if (el.type === 'file') return; if (el.type === 'checkbox' || el.type === 'radio') el.checked = Boolean(settings[id]); else el.value = settings[id]; }); } catch (e) { // 设置损坏时忽略，保持默认值。 } const selected = qsa('input[name="input-mode"]:checked')[0]; showPanel(selected ? selected.value : 'single-url'); } qs('#input-html-file').addEventListener('change', renderHtmlFileList); qs('#btn-load-sample-html').addEventListener('click', loadSampleHtml); qs('#btn-load-sample-urls').addEventListener('click', loadSampleUrls); qs('#btn-source-sample').addEventListener('click', loadSampleHtml); qs('#btn-save-settings').addEventListener('click', saveSettings); qs('#btn-save-settings-output').addEventListener('click', saveSettings); restoreSettings(); qs('#btn-format-all').addEventListener('click', (e) => { e.preventDefault(); qsa('.format-chk').forEach(c => c.checked = true); }); qs('#btn-format-none').addEventListener('click', (e) => { e.preventDefault(); qsa('.format-chk').forEach(c => c.checked = false); }); function getFormats() { const set = new Set(qsa('.format-chk:checked').map(c => c.value.toLowerCase())); if (set.has('tiff')) set.add('tif'); return set; } function getSources() { return new Set(qsa('.source-chk:checked').map(c => c.value)); } function getNumber(sel, fallback, min, max) { const value = parseInt(qs(sel).value || String(fallback), 10); let out = Number.isFinite(value) ? value : fallback; if (typeof min === 'number') out = Math.max(min, out); if (typeof max === 'number') out = Math.min(max, out); return out; } function getOptions() { const maxMb = getNumber('#max-file-size', 30, 1, 80); return { formats: getFormats(), sources: getSources(), srcsetStrategy: qs('#srcset-strategy').value, includeKeyword: (qs('#url-include').value || '').trim(), excludeKeyword: (qs('#url-exclude').value || '').trim(), includeDataUri: qs('#opt-include-datauri').checked, limit: getNumber('#limit-count', 0, 0, 100000), concurrency: getNumber('#concurrency', 6, 1, 16), minW: getNumber('#min-width', 0, 0, 100000), minH: getNumber('#min-height', 0, 0, 100000), maxW: getNumber('#max-width', 0, 0, 100000), maxH: getNumber('#max-height', 0, 0, 100000), maxFileSizeBytes: maxMb * 1024 * 1024, maxFileSizeMb: maxMb, useProxy: qs('#opt-use-proxy').checked, fetchExternalCss: qs('#opt-fetch-external-css').checked, probeUnknown: qs('#opt-probe-unknown').checked, downloadStrategy: qs('#download-strategy').value, sortBy: qs('#sort-by').value }; } function updateStatus(msg) { statusText.textContent = msg || ''; } function setProgress(done, total) { const percent = total ? Math.round((done / total) * 100) : 0; progressBar.style.width = percent + '%'; progressBar.textContent = percent + '%'; progressBar.setAttribute('aria-valuenow', String(percent)); } function setBusy(busy) { startBtn.disabled = busy; downloadZipBtn.disabled = busy; downloadSelectedBtn.disabled = busy; batchDownloadBtn.disabled = busy; retryFailedBtn.disabled = busy; exportUrlsBtn.disabled = busy; exportCsvBtn.disabled = busy; exportJsonBtn.disabled = busy; copyUrlsBtn.disabled = busy; cancelBtn.style.display = busy ? 'block' : 'none'; cancelBtn.disabled = !busy; } function beginTask() { cancelRequested = false; taskController = new AbortController(); setBusy(true); return taskController.signal; } function endTask() { setBusy(false); taskController = null; cancelRequested = false; } function ensureNotCancelled() { if (cancelRequested || (taskController && taskController.signal.aborted)) { throw new DOMException('任务已取消', 'AbortError'); } } cancelBtn.addEventListener('click', () => { cancelRequested = true; if (taskController) taskController.abort(); updateStatus('正在取消当前任务…'); }); function sanitizeFileName(name) { return String(name || 'image').replace(/[\\/:*?"<>|\n\r]+/g, '_').replace(/\s+/g, ' ').trim().slice(0, 180) || 'image'; } function decodeHtmlEntities(value) { if (!value || !/[&;]/.test(value)) return value || ''; const area = document.createElement('textarea'); area.innerHTML = value; return area.value; } function mimeToExt(contentType) { const mime = String(contentType || '').split(';')[0].trim().toLowerCase(); return MIME_TO_EXT[mime] || ''; } function extFromUrl(url) { try { if (/^data:image\//i.test(url)) { const m = url.match(/^data:(image\/[^;,]+)/i); return mimeToExt(m ? m[1] : '') || 'png'; } const u = new URL(url, location.href); const p = u.pathname.toLowerCase(); let m = p.match(/\.([a-z0-9]{2,5})$/i); if (m) return normalizeExt(m[1]); const params = u.searchParams; const keys = ['format', 'fm', 'type', 'ext', 'output']; for (const key of keys) { const value = (params.get(key) || '').toLowerCase(); if (IMAGE_EXTS.has(normalizeExt(value))) return normalizeExt(value); } const process = (params.get('x-oss-process') || params.get('image_process') || '').toLowerCase(); m = process.match(/format[,/]([a-z0-9]+)/); if (m && IMAGE_EXTS.has(normalizeExt(m[1]))) return normalizeExt(m[1]); return ''; } catch { return ''; } } function normalizeExt(ext) { ext = String(ext || '').replace(/^\./, '').toLowerCase(); if (ext === 'jpe') return 'jpg'; if (ext === 'tif') return 'tiff'; return ext; } function resolveUrl(link, base) { const value = cleanCandidateValue(link); if (!value) return ''; if (/^data:image\//i.test(value)) return value; try { const resolved = new URL(value, base || location.href); resolved.hash = ''; return resolved.href; } catch { return value; } } function cleanCandidateValue(value) { let out = decodeHtmlEntities(String(value || '').trim()); out = out.replace(/^['"]|['"]$/g, '').trim(); if (!out || out === '#' || /^about:blank$/i.test(out)) return ''; if (/^(javascript|mailto|tel|blob|file):/i.test(out)) return ''; if (/^#/.test(out)) return ''; return out; } function isImageLikeUrl(url, opts, allowUnknown) { if (!url) return false; if (/^data:/i.test(url)) { if (!opts.includeDataUri || !/^data:image\//i.test(url)) return false; const ext = extFromUrl(url); return opts.formats.has(normalizeExt(ext)); } if (!/^https?:\/\//i.test(url)) return false; const ext = extFromUrl(url); if (ext) return opts.formats.has(normalizeExt(ext)); return Boolean(allowUnknown || opts.probeUnknown); } function normalizeCandidate(item, opts) { const ext = normalizeExt(item.ext || extFromUrl(item.url)); item.ext = ext; item.selected = item.selected !== false; item.status = item.status || '待处理'; if (item.url && opts.includeKeyword && !item.url.includes(opts.includeKeyword)) { item.filteredOut = true; item.filterReason = '不包含关键字'; } if (item.url && opts.excludeKeyword && item.url.includes(opts.excludeKeyword)) { item.filteredOut = true; item.filterReason = '包含排除关键字'; } return item; } function splitSrcset(srcsetStr) { const parts = []; let current = ''; let quote = ''; let parenDepth = 0; const input = String(srcsetStr || ''); for (let i = 0; i < input.length; i++) { const ch = input[i]; if (quote) { current += ch; if (ch === quote) quote = ''; continue; } if (ch === '"' || ch === "'") { quote = ch; current += ch; continue; } if (ch === '(') parenDepth++; if (ch === ')' && parenDepth > 0) parenDepth--; if (ch === ',' && parenDepth === 0) { const rest = input.slice(i + 1); if (/^\s*(?:https?:|\/\/|\/|\.{1,2}\/|[^,\s]+\.(?:jpe?g|png|webp|gif|svg|bmp|ico|avif|tiff?))/i.test(rest)) { if (current.trim()) parts.push(current.trim()); current = ''; continue; } } current += ch; } if (current.trim()) parts.push(current.trim()); return parts; } function parseSrcset(srcsetStr) { return splitSrcset(srcsetStr).map(part => { const seg = part.trim().split(/\s+/); const url = seg.shift() || ''; const desc = seg.join(' '); let score = 1; const x = desc.match(/(\d+(?:\.\d+)?)x\b/i); const w = desc.match(/(\d+)w\b/i); if (x) score = parseFloat(x[1]) || 1; if (w) score = parseInt(w[1], 10) || 1; return { url, desc, score }; }).filter(x => x.url); } function pickFromSrcset(srcsetStr, strategy) { const list = parseSrcset(srcsetStr); if (!list.length) return []; if (strategy === 'all') return list; if (strategy === '1x') { const one = list.find(x => /\b1x\b/i.test(x.desc)); return [one || list.slice().sort((a,b)=>a.score-b.score)[0]]; } if (strategy === '2x') { const two = list.find(x => /\b2x\b/i.test(x.desc)); return [two || list.slice().sort((a,b)=>b.score-a.score)[0]]; } return [list.slice().sort((a,b)=>b.score-a.score)[0]]; } function addCandidate(items, rawUrl, source, baseUrl, pageUrl, opts, allowUnknown) { const cleaned = cleanCandidateValue(rawUrl); if (!cleaned) return; const url = resolveUrl(cleaned, baseUrl); if (!url || !isImageLikeUrl(url, opts, allowUnknown)) return; items.push({ url, source, pageUrl: pageUrl || baseUrl || '', ext: extFromUrl(url), selected: true, status: '待处理' }); } function effectiveBaseUrl(doc, baseUrl) { let base = baseUrl || location.href; const baseEl = qs('base[href]', doc); if (baseEl) { base = resolveUrl(baseEl.getAttribute('href'), base); } return base; } function collectDomCandidates(doc, baseUrl, pageUrl, opts, items) { if (opts.sources.has('img')) { qsa('img', doc).forEach(img => { ['src','data-src','data-original','data-lazy','data-url','data-image','data-img','data-full','data-large','data-actualsrc'].forEach(attr => { addCandidate(items, img.getAttribute(attr), 'img', baseUrl, pageUrl, opts, true); }); }); } if (opts.sources.has('srcset')) { qsa('img[srcset], source[srcset], [data-srcset]', doc).forEach(el => { const srcset = el.getAttribute('srcset') || el.getAttribute('data-srcset'); pickFromSrcset(srcset, opts.srcsetStrategy).forEach(c => addCandidate(items, c.url, 'srcset', baseUrl, pageUrl, opts, true)); }); } if (opts.sources.has('lazy')) { const attrPattern = /^(data-(?:src|original|lazy|url|image|img|bg|background|thumb|thumbnail|large|full|zoom|poster|srcset)|poster)$/i; qsa('*', doc).forEach(el => { Array.from(el.attributes || []).forEach(attr => { if (!attrPattern.test(attr.name)) return; if (/srcset/i.test(attr.name)) { pickFromSrcset(attr.value, opts.srcsetStrategy).forEach(c => addCandidate(items, c.url, 'lazy-srcset', baseUrl, pageUrl, opts, true)); return; } if (/url\(/i.test(attr.value)) { collectCssCandidates(attr.value, baseUrl, pageUrl, opts, items, 'lazy-css'); return; } addCandidate(items, attr.value, 'lazy', baseUrl, pageUrl, opts, true); }); }); } if (opts.sources.has('css')) { qsa('[style]', doc).forEach(el => collectCssCandidates(el.getAttribute('style') || '', baseUrl, pageUrl, opts, items, 'inline-css')); qsa('style', doc).forEach(el => collectCssCandidates(el.textContent || '', baseUrl, pageUrl, opts, items, 'style')); } if (opts.sources.has('meta')) { qsa('meta[property="og:image"], meta[property="og:image:secure_url"], meta[name="twitter:image"], meta[name="twitter:image:src"], meta[itemprop="image"]', doc).forEach(el => { addCandidate(items, el.getAttribute('content'), 'meta', baseUrl, pageUrl, opts, true); }); qsa('link[rel~="icon"], link[rel~="apple-touch-icon"], link[rel~="apple-touch-icon-precomposed"], link[rel~="preload"][as="image"], link[rel~="image_src"]', doc).forEach(el => { addCandidate(items, el.getAttribute('href'), 'link-meta', baseUrl, pageUrl, opts, true); }); qsa('video[poster], object[data], embed[src]', doc).forEach(el => { addCandidate(items, el.getAttribute('poster') || el.getAttribute('data') || el.getAttribute('src'), 'media', baseUrl, pageUrl, opts, true); }); qsa('noscript', doc).forEach(el => { const nested = new DOMParser().parseFromString(el.textContent || '', 'text/html'); collectDomCandidates(nested, baseUrl, pageUrl, opts, items); }); } if (opts.sources.has('link')) { qsa('a[href]', doc).forEach(a => addCandidate(items, a.getAttribute('href'), 'a[href]', baseUrl, pageUrl, opts, false)); } } function collectCssCandidates(css, baseUrl, pageUrl, opts, items, source) { const text = String(css || ''); const urlRe = /url$\s*(['"]?)(.*?)\1\s*$/ig; let m; while ((m = urlRe.exec(text)) !== null) { addCandidate(items, m[2], source, baseUrl, pageUrl, opts, true); } const imageSetRe = /(?:-webkit-)?image-set$(.*?)$/ig; while ((m = imageSetRe.exec(text)) !== null) { splitImageSet(m[1]).forEach(value => addCandidate(items, value, source, baseUrl, pageUrl, opts, true)); } } function splitImageSet(value) { return String(value || '').split(',').map(part => { const urlMatch = part.match(/url$\s*(['"]?)(.*?)\1\s*$/i); if (urlMatch) return urlMatch[2]; const quoted = part.match(/['"]([^'"]+)['"]/); return quoted ? quoted[1] : ''; }).filter(Boolean); } function collectCssImports(css, baseUrl) { const imports = []; const re = /@import\s+(?:url$\s*)?(['"]?)([^'"$\s;]+)\1\s*\)?/ig; let m; while ((m = re.exec(String(css || ''))) !== null) { const url = resolveUrl(m[2], baseUrl); if (/^https?:\/\//i.test(url)) imports.push(url); } return imports; } async function collectExternalCss(doc, baseUrl, pageUrl, opts, items) { if (!opts.useProxy && !opts.fetchExternalCss) return; if (!opts.fetchExternalCss || !opts.sources.has('css')) return; const stylesheetUrls = qsa('link[rel~="stylesheet"][href]', doc) .map(el => resolveUrl(el.getAttribute('href'), baseUrl)) .filter(url => /^https?:\/\//i.test(url)); const seen = new Set(); const queue = stylesheetUrls.slice(0, 30); let processed = 0; while (queue.length && processed < 40) { ensureNotCancelled(); const cssUrl = queue.shift(); if (!cssUrl || seen.has(cssUrl)) continue; seen.add(cssUrl); processed++; try { const text = await fetchText(cssUrl, opts, 2097152); collectCssCandidates(text.text, text.url || cssUrl, pageUrl, opts, items, 'external-css'); collectCssImports(text.text, text.url || cssUrl).forEach(importUrl => { if (!seen.has(importUrl) && queue.length < 40) queue.push(importUrl); }); } catch (e) { // 外部 CSS 失败不影响主流程 } } } async function collectFromHtml(html, baseUrl, opts, pageUrl) { const doc = new DOMParser().parseFromString(String(html || ''), 'text/html'); const base = effectiveBaseUrl(doc, baseUrl); const items = []; collectDomCandidates(doc, base, pageUrl || base, opts, items); await collectExternalCss(doc, base, pageUrl || base, opts, items); return items.map(item => normalizeCandidate(item, opts)).filter(item => !item.filteredOut); } async function apiPost(action, payload, responseType) { const signal = taskController ? taskController.signal : undefined; const resp = await fetch(`${API_ENDPOINT}?wid_action=${encodeURIComponent(action)}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload || {}), signal }); if (responseType === 'blob') { if (!resp.ok) throw new Error(await responseError(resp)); return resp.blob(); } const data = await resp.json().catch(() => null); if (!resp.ok || !data || data.ok === false) { throw new Error((data && data.error) ? data.error : `HTTP ${resp.status}`); } return data; } async function responseError(resp) { const text = await resp.text().catch(() => ''); try { const data = JSON.parse(text); return data.error || `HTTP ${resp.status}`; } catch { return text || `HTTP ${resp.status}`; } } async function fetchText(url, opts, maxBytes) { ensureNotCancelled(); const direct = async () => { const resp = await fetch(url, { credentials: 'omit', signal: taskController ? taskController.signal : undefined }); if (!resp.ok) throw new Error('HTTP ' + resp.status); return { ok: true, url: resp.url || url, contentType: resp.headers.get('content-type') || '', text: await resp.text() }; }; if (opts.useProxy) { try { return await apiPost('fetch_text', { url, maxBytes: maxBytes || 5242880 }); } catch (proxyError) { try { return await direct(); } catch (directError) { throw new Error(`代理失败：${proxyError.message || proxyError}；直连失败：${directError.message || directError}`); } } } return direct(); } async function inspectUnknownItems(items, opts) { if (!opts.useProxy || !opts.probeUnknown) return items; const targets = items.filter(item => !item.url.startsWith('data:') && (!item.ext || !opts.formats.has(normalizeExt(item.ext)))); if (!targets.length) return items; updateStatus(`正在识别 ${targets.length} 个无扩展名或参数化图片…`); await poolAll(targets, async (item) => { try { const info = await apiPost('inspect_asset', { url: item.url }); item.contentType = info.contentType || ''; item.byteSize = parseInt(info.contentLength || '0', 10) || 0; item.finalUrl = info.url || item.url; item.ext = normalizeExt(mimeToExt(item.contentType) || extFromUrl(item.finalUrl || item.url) || item.ext); } catch (e) { item.inspectError = e.message || '识别失败'; } return item; }, Math.min(opts.concurrency, 6), (done, total) => setProgress(done, total)); return items; } function uniqueByUrl(items) { const map = new Map(); items.forEach(item => { const key = item.url; if (!map.has(key)) { item.id = map.size + 1; map.set(key, item); } else { const existing = map.get(key); if (!existing.source.includes(item.source)) existing.source += ',' + item.source; } }); return Array.from(map.values()); } function applyFormatFilter(items, opts, allowUnknown) { return items.filter(item => { if (!item.url) return false; if (/^data:/i.test(item.url)) { if (!opts.includeDataUri || !/^data:image\//i.test(item.url)) return false; const ext = normalizeExt(extFromUrl(item.url)); item.ext = ext; return opts.formats.has(ext); } if (!/^https?:\/\//i.test(item.url)) return false; const ext = normalizeExt(item.ext || extFromUrl(item.url) || mimeToExt(item.contentType)); item.ext = ext; if (ext) return opts.formats.has(ext); return Boolean(allowUnknown && opts.probeUnknown); }); } function applyDimensionFilter(items, opts) { return items.filter(item => { const w = item.width || 0; const h = item.height || 0; if (opts.minW && w < opts.minW) return false; if (opts.minH && h < opts.minH) return false; if (opts.maxW && opts.maxW > 0 && w > opts.maxW) return false; if (opts.maxH && opts.maxH > 0 && h > opts.maxH) return false; return true; }); } function sortItems(items, sortBy) { const copy = items.slice(); if (sortBy === 'width-desc') return copy.sort((a,b)=>(b.width||0)-(a.width||0)); if (sortBy === 'height-desc') return copy.sort((a,b)=>(b.height||0)-(a.height||0)); if (sortBy === 'area-desc') return copy.sort((a,b)=>((b.width||0)*(b.height||0))-((a.width||0)*(a.height||0))); if (sortBy === 'format-asc') return copy.sort((a,b)=>String(a.ext||'').localeCompare(String(b.ext||''))); if (sortBy === 'url-asc') return copy.sort((a,b)=>String(a.url).localeCompare(String(b.url))); return copy; } function buildProxyAssetUrl(item, download, opts, filename) { const params = new URLSearchParams(); params.set('wid_action', 'fetch_asset'); params.set('url', item.url); params.set('max_mb', String(opts.maxFileSizeMb || 30)); if (download) { params.set('download', '1'); params.set('filename', filename || buildFileName(item, 0)); } return `${API_ENDPOINT}?${params.toString()}`; } function previewUrl(item, opts) { if (/^data:image\//i.test(item.url)) return item.url; if (opts && opts.useProxy) return buildProxyAssetUrl(item, false, opts); return item.url; } function loadImageMeta(item, opts) { return new Promise((resolve) => { ensureNotCancelled(); const img = new Image(); let finished = false; const done = (ok) => { if (finished) return; finished = true; clearTimeout(timer); item.width = ok ? img.naturalWidth || 0 : 0; item.height = ok ? img.naturalHeight || 0 : 0; item.status = ok ? '已识别' : '尺寸未知'; resolve(item); }; const timer = setTimeout(() => done(false), 12000); img.onload = () => done(true); img.onerror = () => { if (opts.useProxy && img.src === item.url && !/^data:/i.test(item.url)) { img.src = buildProxyAssetUrl(item, false, opts); return; } done(false); }; img.decoding = 'async'; img.referrerPolicy = 'no-referrer'; img.src = previewUrl(item, opts); if (taskController) { taskController.signal.addEventListener('abort', () => { img.src = ''; done(false); }, { once: true }); } }); } async function poolAll(items, worker, concurrency, onProgress) { const out = new Array(items.length); let done = 0; let cursor = 0; async function run() { while (cursor < items.length) { ensureNotCancelled(); const i = cursor++; try { out[i] = await worker(items[i], i); } catch (e) { if (e && e.name === 'AbortError') throw e; out[i] = items[i]; out[i].status = out[i].status || '处理失败'; out[i].error = e && e.message ? e.message : '处理失败'; } done++; if (onProgress) onProgress(done, items.length); } } const runners = []; const count = Math.min(Math.max(concurrency || 1, 1), items.length || 1); for (let i = 0; i < count; i++) runners.push(run()); await Promise.all(runners); return out; } async function processCollectedItems(items, opts) { let out = items.map(item => normalizeCandidate(item, opts)).filter(item => !item.filteredOut); out = uniqueByUrl(out); out = applyFormatFilter(out, opts, true); if (!out.length) return []; progressContainer.style.display = 'flex'; setProgress(0, out.length); out = await inspectUnknownItems(out, opts); out = applyFormatFilter(out, opts, false); if (opts.limit && opts.limit > 0) { out = out.slice(0, opts.limit); } if (!out.length) return []; updateStatus('正在获取图片尺寸并应用尺寸过滤…'); setProgress(0, out.length); await poolAll(out, item => loadImageMeta(item, opts), opts.concurrency, (done, total) => setProgress(done, total)); out = applyDimensionFilter(out, opts); out = sortItems(out, opts.sortBy); out.forEach((item, index) => { item.id = index + 1; item.selected = item.selected !== false; }); return out; } async function prepareFromSingleUrl(url, opts) { const page = await fetchText(url, opts, 5242880); return collectFromHtml(page.text, page.url || url, opts, page.url || url); } async function prepareFromMultiUrls(lines, opts) { const urls = lines.map(s => s.trim()).filter(Boolean); const all = []; let done = 0; await poolAll(urls, async (url) => { updateStatus(`正在抓取网页 ${done + 1}/${urls.length}…`); const part = await prepareFromSingleUrl(url, opts); all.push.apply(all, part); done++; return part; }, Math.min(opts.concurrency, 4), (count, total) => setProgress(count, total)); return all; } async function prepareFromHtmlText(text, baseUrl, opts) { return collectFromHtml(text, baseUrl || location.href, opts, baseUrl || '粘贴HTML'); } async function prepareFromHtmlFiles(files, opts) { const list = Array.from(files || []); const all = []; await poolAll(list, async (file) => { const text = await readFileAsText(file); const part = await collectFromHtml(text, location.href, opts, file.name); all.push.apply(all, part); return part; }, Math.min(opts.concurrency, 4), (done, total) => setProgress(done, total)); return all; } function readFileAsText(file) { return new Promise((resolve) => { const fr = new FileReader(); fr.onload = () => resolve(String(fr.result || '')); fr.onerror = () => resolve(''); fr.readAsText(file); }); } function prepareFromImageUrls(lines, opts) { return lines.map(s => s.trim()).filter(Boolean).map((url, index) => { const normalized = /^data:image\//i.test(url) ? url : resolveUrl(url, location.href); return normalizeCandidate({ url: normalized, source: 'url-list', pageUrl: 'URL列表', ext: extFromUrl(normalized), selected: true, id: index + 1, status: '待处理' }, opts); }).filter(item => !item.filteredOut); } async function onStart() { const opts = getOptions(); lastOptions = opts; if (!opts.formats.size) { alert('请至少选择一种图片格式'); return; } if (!opts.sources.size && qsa('input[name="input-mode"]:checked')[0].value !== 'image-urls') { alert('请至少选择一种图片来源'); return; } const signal = beginTask(); extractedItems = []; failedDownloads = []; resultsContainer.style.display = 'none'; hideActionButtons(); progressContainer.style.display = 'flex'; setProgress(0, 1); updateStatus('正在收集图片URL…'); try { const mode = qsa('input[name="input-mode"]:checked')[0].value; let collected = []; if (mode === 'single-url') { const url = (qs('#input-single-url').value || '').trim(); if (!url) throw new Error('请输入网页URL'); collected = await prepareFromSingleUrl(url, opts); } else if (mode === 'multi-url') { const lines = (qs('#input-multi-url').value || '').split(/\r?\n/); if (!lines.map(x => x.trim()).filter(Boolean).length) throw new Error('请输入网页URL列表'); collected = await prepareFromMultiUrls(lines, opts); } else if (mode === 'html-text') { const html = qs('#input-html-text').value || ''; if (!html.trim()) throw new Error('请粘贴HTML源码'); collected = await prepareFromHtmlText(html, (qs('#input-html-base').value || '').trim(), opts); } else if (mode === 'html-file') { const files = qs('#input-html-file').files; if (!files || files.length === 0) throw new Error('请选择HTML文件'); collected = await prepareFromHtmlFiles(files, opts); } else if (mode === 'image-urls') { const lines = (qs('#input-image-urls').value || '').split(/\r?\n/); if (!lines.map(x => x.trim()).filter(Boolean).length) throw new Error('请输入图片URL列表'); collected = prepareFromImageUrls(lines, opts); } ensureNotCancelled(); updateStatus(`已发现 ${collected.length} 个候选地址，正在去重和过滤…`); extractedItems = await processCollectedItems(collected, opts); ensureNotCancelled(); progressContainer.style.display = 'none'; if (!extractedItems.length) { updateStatus('未找到符合条件的图片。请调整格式、来源、关键字或尺寸限制后重试。'); return; } renderResults(extractedItems, opts); showActionButtons(); updateStatus(`已收集 ${extractedItems.length} 张图片。`); setStep('result-step'); } catch (e) { progressContainer.style.display = 'none'; if (e && e.name === 'AbortError') { updateStatus('任务已取消。'); } else { console.error(e); updateStatus('解析出错：' + (e && e.message ? e.message : '未知错误')); } } finally { if (signal.aborted) cancelRequested = true; endTask(); } } function hideActionButtons() { [downloadZipBtn, downloadSelectedBtn, batchDownloadBtn, retryFailedBtn, exportUrlsBtn, exportCsvBtn, exportJsonBtn, copyUrlsBtn].forEach(btn => { btn.style.display = 'none'; }); } function showActionButtons() { [downloadZipBtn, downloadSelectedBtn, batchDownloadBtn, exportUrlsBtn, exportCsvBtn, exportJsonBtn, copyUrlsBtn].forEach(btn => { btn.style.display = 'inline-block'; }); retryFailedBtn.style.display = failedDownloads.length ? 'inline-block' : 'none'; } function renderResults(items, opts) { resultsContainer.style.display = 'block'; renderSummary(items); renderPreview(items, opts); renderTable(items, opts); } function renderSummary(items) { const selected = items.filter(x => x.selected).length; const formats = {}; const sources = {}; items.forEach(item => { const ext = item.ext || '未知'; formats[ext] = (formats[ext] || 0) + 1; String(item.source || '未知').split(',').forEach(source => { sources[source] = (sources[source] || 0) + 1; }); }); const fmtText = Object.keys(formats).sort().map(k => `${k}: ${formats[k]}`).join('，'); const sourceText = Object.keys(sources).sort().slice(0, 8).map(k => `${k}: ${sources[k]}`).join('，'); resultsSummary.textContent = `共 ${items.length} 张，已选 ${selected} 张。格式：${fmtText || '未知'}。来源：${sourceText || '未知'}。`; } function renderPreview(items, opts) { resultsPreview.innerHTML = ''; const show = items.slice(0, 20); show.forEach(item => { const col = document.createElement('div'); col.className = 'wid-preview-item'; const card = document.createElement('div'); card.className = 'card'; const img = document.createElement('img'); img.className = 'card-img-top'; img.style.height = '120px'; img.style.objectFit = 'cover'; img.loading = 'lazy'; img.referrerPolicy = 'no-referrer'; img.src = previewUrl(item, opts); const body = document.createElement('div'); body.className = 'card-body p-2'; const url = document.createElement('small'); url.className = 'text-muted d-block'; url.style.wordBreak = 'break-all'; url.textContent = item.url; const meta = document.createElement('small'); meta.className = 'text-success'; meta.textContent = `${item.width || 0}x${item.height || 0} · ${item.ext || 'unknown'}`; body.appendChild(url); body.appendChild(meta); card.appendChild(img); card.appendChild(body); col.appendChild(card); resultsPreview.appendChild(col); }); resultsMore.textContent = items.length > 20 ? `以及其他 ${items.length - 20} 张图片未在界面展示，下载和导出会包含全部结果。` : ''; } function renderTable(items, opts) { resultsTableBody.innerHTML = ''; const maxRows = 20; items.slice(0, maxRows).forEach((item, index) => { const tr = document.createElement('tr'); const tdCheck = document.createElement('td'); const check = document.createElement('input'); check.type = 'checkbox'; check.className = 'result-select'; check.dataset.index = String(index); check.checked = item.selected !== false; tdCheck.appendChild(check); const tdImg = document.createElement('td'); const img = document.createElement('img'); img.src = previewUrl(item, opts); img.alt = ''; img.loading = 'lazy'; img.referrerPolicy = 'no-referrer'; img.style.width = '48px'; img.style.height = '48px'; img.style.objectFit = 'cover'; tdImg.appendChild(img); const tdUrl = document.createElement('td'); const link = document.createElement('a'); link.href = item.url; link.target = '_blank'; link.rel = 'noopener noreferrer'; link.textContent = item.url; link.style.wordBreak = 'break-all'; tdUrl.appendChild(link); const tdSize = document.createElement('td'); tdSize.textContent = `${item.width || 0}x${item.height || 0}`; const tdExt = document.createElement('td'); tdExt.textContent = item.ext || '未知'; const tdSource = document.createElement('td'); tdSource.textContent = item.source || '未知'; const tdStatus = document.createElement('td'); tdStatus.textContent = item.error ? `${item.status || '失败'}：${item.error}` : (item.status || '待处理'); [tdCheck, tdImg, tdUrl, tdSize, tdExt, tdSource, tdStatus].forEach(td => tr.appendChild(td)); resultsTableBody.appendChild(tr); }); if (items.length > maxRows) { const tr = document.createElement('tr'); const td = document.createElement('td'); td.colSpan = 7; td.style.textAlign = 'center'; td.style.color = 'var(--wid-muted)'; td.textContent = `表格仅显示前 ${maxRows} 条，下载和导出会包含全部结果。`; tr.appendChild(td); resultsTableBody.appendChild(tr); } } resultsTableBody.addEventListener('change', (e) => { const target = e.target; if (!target.classList.contains('result-select')) return; const index = parseInt(target.dataset.index || '-1', 10); if (extractedItems[index]) { extractedItems[index].selected = target.checked; renderSummary(extractedItems); } }); qs('#btn-select-all').addEventListener('click', () => updateSelection('all')); qs('#btn-select-none').addEventListener('click', () => updateSelection('none')); qs('#btn-select-invert').addEventListener('click', () => updateSelection('invert')); function updateSelection(mode) { extractedItems.forEach(item => { if (mode === 'all') item.selected = true; if (mode === 'none') item.selected = false; if (mode === 'invert') item.selected = !item.selected; }); renderResults(extractedItems, lastOptions || getOptions()); } function getDownloadItems(selectedOnly) { const items = selectedOnly ? extractedItems.filter(item => item.selected) : extractedItems.slice(); if (!items.length) { alert(selectedOnly ? '请至少选择一张图片' : '没有可下载的图片'); return []; } return items; } function buildFileName(item, idx, blob) { const pattern = qs('#rename-pattern').value || '{index}_{name}.{ext}'; const url = item.url || ''; const extFromBlob = blob && blob.type ? mimeToExt(blob.type) : ''; let ext = normalizeExt(extFromBlob || item.ext || extFromUrl(url) || 'png'); let host = ''; let baseName = 'image'; try { if (/^data:/i.test(url)) { baseName = 'data_image'; } else { const parsed = new URL(url, location.href); host = parsed.host || ''; const base = (parsed.pathname || '').split('/').filter(Boolean).pop() || 'image'; const m = base.match(/^(.*?)(?:\.([^.]+))?$/); baseName = (m && m[1]) ? m[1] : 'image'; } } catch { baseName = 'image'; } const domain = host.replace(/^www\./i, ''); const date = new Date().toISOString().slice(0, 10).replace(/-/g, ''); let out = pattern; const replacements = { '{index}': String(idx + 1).padStart(3, '0'), '{name}': baseName, '{ext}': ext, '{host}': host, '{domain}': domain, '{page}': sanitizeFileName((item.pageUrl || 'page').split('/').filter(Boolean).pop() || 'page'), '{source}': sanitizeFileName(item.source || 'source'), '{width}': String(item.width || 0), '{height}': String(item.height || 0), '{width}x{height}': `${item.width || 0}x${item.height || 0}`, '{date}': date }; Object.keys(replacements).forEach(key => { out = out.split(key).join(replacements[key]); }); out = sanitizeFileName(out); if (!/\.[a-z0-9]{2,5}$/i.test(out)) out += '.' + ext; return out; } function uniqueFileName(name, used) { let out = name; const lower = out.toLowerCase(); if (!used.has(lower)) { used.add(lower); return out; } const dot = out.lastIndexOf('.'); const base = dot > -1 ? out.slice(0, dot) : out; const ext = dot > -1 ? out.slice(dot) : ''; let i = 2; while (used.has(`${base}_${i}${ext}`.toLowerCase())) i++; out = `${base}_${i}${ext}`; used.add(out.toLowerCase()); return out; } async function fetchImageBlob(item, opts) { ensureNotCancelled(); if (/^data:image\//i.test(item.url)) { const blob = dataUrlToBlob(item.url); if (blob.size > opts.maxFileSizeBytes) throw new Error('超过单图大小上限'); return blob; } const direct = async () => { const resp = await fetch(item.url, { credentials: 'omit', signal: taskController ? taskController.signal : undefined }); if (!resp.ok) throw new Error('HTTP ' + resp.status); const blob = await resp.blob(); if (blob.size > opts.maxFileSizeBytes) throw new Error('超过单图大小上限'); return blob; }; const proxy = async () => { const blob = await apiPost('fetch_asset', { url: item.url, maxBytes: opts.maxFileSizeBytes }, 'blob'); if (blob.size > opts.maxFileSizeBytes) throw new Error('超过单图大小上限'); return blob; }; if (opts.downloadStrategy === 'direct-only') return direct(); if (opts.downloadStrategy === 'proxy-only') return proxy(); if (opts.downloadStrategy === 'direct-first') { try { return await direct(); } catch (e) { return proxy(); } } try { return await proxy(); } catch (e) { return direct(); } } function dataUrlToBlob(dataUrl) { const parts = String(dataUrl).split(','); const meta = parts[0] || 'data:image/png;base64'; const body = parts.slice(1).join(','); const mime = (meta.match(/^data:([^;,]+)/i) || [,'application/octet-stream'])[1]; const isBase64 = /;base64/i.test(meta); const binary = isBase64 ? atob(body) : decodeURIComponent(body); const bytes = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i); return new Blob([bytes], { type: mime }); } async function downloadItemsAsZip(items, fileName) { if (typeof JSZip === 'undefined') { alert('压缩组件(JSZip)加载失败'); return; } const opts = getOptions(); lastOptions = opts; beginTask(); progressContainer.style.display = 'flex'; setProgress(0, items.length); updateStatus('正在下载并打包图片…'); const zip = new JSZip(); const usedNames = new Set(); let added = 0; const failed = []; try { await poolAll(items, async (item, idx) => { try { item.status = '下载中'; const blob = await fetchImageBlob(item, opts); const fname = uniqueFileName(buildFileName(item, idx, blob), usedNames); zip.file(fname, blob); item.status = '已加入ZIP'; item.error = ''; item.contentType = blob.type || item.contentType || ''; item.byteSize = blob.size; added++; } catch (e) { item.status = '下载失败'; item.error = e && e.message ? e.message : '下载失败'; failed.push(item); } }, Math.min(opts.concurrency, 8), (done, total) => setProgress(done, total)); failedDownloads = failed; retryFailedBtn.style.display = failedDownloads.length ? 'inline-block' : 'none'; if (added === 0) { updateStatus('打包失败：所有图片均无法下载。可导出URL列表或调整下载策略后重试。'); renderResults(extractedItems, opts); return; } updateStatus('正在生成ZIP…'); const blob = await zip.generateAsync({ type: 'blob' }); triggerBlobDownload(blob, fileName || 'images.zip'); updateStatus(`已打包 ${added} 张图片${failed.length ? `，失败 ${failed.length} 张` : ''}。`); renderResults(extractedItems, opts); } catch (e) { if (e && e.name === 'AbortError') updateStatus('下载任务已取消。'); else updateStatus('下载出错：' + (e && e.message ? e.message : '未知错误')); } finally { progressContainer.style.display = 'none'; endTask(); } } function triggerBlobDownload(blob, filename) { const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = filename; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(a.href), 10000); } function batchDownloadLinks() { const opts = getOptions(); const items = getDownloadItems(false); if (!items.length) return; const delay = 450; let i = 0; updateStatus('正在依次触发下载（浏览器可能会提示允许多个下载）…'); const timer = setInterval(() => { if (i >= items.length) { clearInterval(timer); updateStatus('下载任务已触发完成。'); return; } const item = items[i]; const fname = buildFileName(item, i); const a = document.createElement('a'); const useProxy = opts.downloadStrategy === 'proxy-only' || opts.downloadStrategy === 'proxy-first'; a.href = (!/^data:/i.test(item.url) && useProxy) ? buildProxyAssetUrl(item, true, opts, fname) : item.url; a.download = fname; a.rel = 'noopener noreferrer'; document.body.appendChild(a); a.click(); a.remove(); i++; }, delay); } function exportUrlList() { if (!extractedItems.length) { alert('没有URL'); return; } const content = extractedItems.map(item => item.url).join('\n'); triggerBlobDownload(new Blob([content], { type: 'text/plain;charset=utf-8' }), 'image_urls.txt'); } function csvEscape(value) { const text = String(value == null ? '' : value); return /[",\r\n]/.test(text) ? '"' + text.replace(/"/g, '""') + '"' : text; } function exportCsv() { if (!extractedItems.length) { alert('没有结果'); return; } const header = ['url','width','height','format','source','page','status','bytes','contentType','filename']; const rows = extractedItems.map((item, index) => [ item.url, item.width || '', item.height || '', item.ext || '', item.source || '', item.pageUrl || '', item.status || '', item.byteSize || '', item.contentType || '', buildFileName(item, index) ].map(csvEscape).join(',')); triggerBlobDownload(new Blob([[header.join(',')].concat(rows).join('\n')], { type: 'text/csv;charset=utf-8' }), 'image_results.csv'); } function exportJson() { if (!extractedItems.length) { alert('没有结果'); return; } const data = extractedItems.map((item, index) => ({ url: item.url, width: item.width || 0, height: item.height || 0, format: item.ext || '', source: item.source || '', page: item.pageUrl || '', status: item.status || '', error: item.error || '', bytes: item.byteSize || 0, contentType: item.contentType || '', filename: buildFileName(item, index) })); triggerBlobDownload(new Blob([JSON.stringify(data, null, 2)], { type: 'application/json;charset=utf-8' }), 'image_results.json'); } async function copyUrlList() { if (!extractedItems.length) { alert('没有URL'); return; } const content = extractedItems.map(item => item.url).join('\n'); try { await navigator.clipboard.writeText(content); updateStatus('已复制URL列表到剪贴板'); } catch { const area = document.createElement('textarea'); area.value = content; document.body.appendChild(area); area.select(); document.execCommand('copy'); area.remove(); updateStatus('已复制URL列表到剪贴板'); } } startBtn.addEventListener('click', onStart); downloadZipBtn.addEventListener('click', () => { const items = getDownloadItems(false); if (items.length) downloadItemsAsZip(items, 'images.zip'); }); downloadSelectedBtn.addEventListener('click', () => { const items = getDownloadItems(true); if (items.length) downloadItemsAsZip(items, 'selected_images.zip'); }); batchDownloadBtn.addEventListener('click', batchDownloadLinks); retryFailedBtn.addEventListener('click', () => { if (!failedDownloads.length) { alert('没有失败任务可重试'); return; } downloadItemsAsZip(failedDownloads.slice(), 'retry_images.zip'); }); exportUrlsBtn.addEventListener('click', exportUrlList); exportCsvBtn.addEventListener('click', exportCsv); exportJsonBtn.addEventListener('click', exportJson); copyUrlsBtn.addEventListener('click', copyUrlList); })();

Instrucciones

Instrucciones de uso del software

Seleccionar fuente de entrada: admite una URL de página web individual, URLs de páginas web por lotes, pegar código fuente HTML, archivos HTML locales y listas de URLs de imágenes.
Configurar filtros: selecciona formatos como jpg, png, webp, gif, svg, avif, y extrae por fuentes como img, srcset, atributos de carga diferida, imágenes de fondo CSS y portadas meta.
Configurar tamaño y cantidad: puedes establecer límites mínimos y máximos de ancho y alto, palabras clave que la URL debe incluir o excluir, límite de cantidad extraída, número de concurrencias y tamaño máximo por imagen.
Configurar nombre y descarga: puedes usar marcadores como {name}, {index}, {ext}, {host}, {width}x{height} para generar nombres de archivo; los nombres duplicados se numerarán automáticamente.
Guardar ajustes frecuentes: haz clic en “Guardar ajustes” para conservar parámetros frecuentes como formato, fuente, tamaño y estrategia de descarga.
Iniciar análisis: tras hacer clic en “Iniciar análisis”, la herramienta recopilará direcciones de imágenes, eliminará duplicados, identificará tamaños y aplicará los filtros.
Vista previa y descarga: el área de resultados muestra los primeros 20 elementos; el resto de resultados seguirá participando en el empaquetado ZIP, la descarga seleccionada, la copia de lista de URLs y la exportación CSV/JSON.

Preguntas frecuentes

R: Algunos sitios limitan la lectura de recursos, por lo que es posible que no se pueda obtener el contenido binario de la imagen al empaquetar. Puedes cambiar la estrategia de descarga o exportar la lista de URLs para procesarla después.

R: Puedes elegir priorizar alta resolución, priorizar 1x, priorizar 2x o conservar todos los candidatos, lo que es adecuado para extraer imágenes de varios tamaños en páginas responsivas.

R: Sí. Al marcar la fuente de imágenes de fondo CSS, se analizarán las imágenes url() en atributos style, etiquetas style, CSS externo y @import.

R: En los parámetros de filtro, establece un ancho mínimo y una altura mínima, por ejemplo, ancho no inferior a 800px y altura no inferior a 600px, para filtrar iconos pequeños e imágenes de marcador de posición.

R: Para mantener la interfaz clara, la vista previa y la tabla solo muestran los primeros 20 elementos; el empaquetado ZIP, la exportación de URL y los detalles en CSV y JSON incluirán todos los resultados analizados.

R: Al descargar o empaquetar, primero se generarán los nombres de archivo según las reglas de nomenclatura; si hay nombres repetidos, se añadirá un número al final del nombre original para evitar sobrescribir resultados existentes.