Downloader batch di immagini da pagine web

Estrai in blocco immagini in formati specifici dalle pagine web, con supporto per filtro per dimensioni, rinomina, creazione di pacchetti ZIP e download tramite link.

Segnala bug

Modalità di esecuzione nel browser: I tuoi dati vengono elaborati nel browser e non caricati sul server.

Velocità e stabilità: La velocità di elaborazione dipende dal dispositivo e dal browser. Per grandi batch, la versione desktop può essere più stabile.

Caricamento strumento, attendi...

Se lo strumento online non si carica o non funziona, prova lo strumento desktop. https://tools.yikeaigc.com/

Uso dello strumento

Torna alla vecchia versione

Imposta prima origine e filtri, poi analizza, anteprima e scarica.

Supporta URL web, codice HTML, file HTML locali e liste di link diretti a immagini. In batch mostra solo i primi 20 elementi in anteprima; download ed export elaborano tutti i risultati.

img / srcset Sfondi CSS Filtro dimensioni Pacchetto ZIP Impostazioni salvabili

File HTML locali Nessun file selezionato

Dopo aver scelto più file HTML, qui sono mostrati i primi 20 nomi; l’analisi elaborerà tutti i file.

Scegli origine input

Definisci prima da dove estrarre le immagini. Per le pagine web il proxy è attivo per impostazione predefinita; se il sito limita l’accesso, incolla l’HTML o usa un file HTML locale.

URL singola paginaEstrai immagini da una pagina URL pagine in batchUn indirizzo pagina per riga Incolla HTMLIdeale per pagine con limiti CORS File HTML localiImporta file in batch Lista URL immaginiDownload diretto e pacchetto

URL pagina web Consigliato inserire prima l’URL, poi impostare formato e dimensioni nel passaggio successivo.

Imposta elaborazione e download

Consigliamo di mantenere il modello nome file predefinito, così le immagini conservano il nome originale; in caso di duplicati verrà aggiunto un numero.

Nomi e downloadAttivo in download o pacchetto

Regole di rinominaDisponibili: {index} {name} {ext} {host} {domain} {page} {source} {width} {height} {width}x{height} {date}

Ordina

Strategia download

Usa proxy server per acquisire pagine/immagini Estrai immagini da CSS esterni e @import Riconosci immagini senza estensione/parametriche

AvviaCompleta prima origine e filtri

Anteprima e download risultati

L’area risultati mostra solo alcune anteprime; ZIP, elenco URL, CSV e JSON includono tutti i risultati estratti.

Download ed esportazioneAnalizza prima i risultati, poi fai clic su download

', '' ].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); })();

Istruzioni

Istruzioni per l'uso del software

Seleziona la sorgente di input: supporta URL di singole pagine web, URL di pagine web in batch, incolla del codice sorgente HTML, file HTML locali ed elenchi di URL di immagini.
Imposta i criteri di filtro: seleziona formati come jpg, png, webp, gif, svg, avif ed estrai da sorgenti come img, srcset, attributi di caricamento lazy, immagini di sfondo CSS, copertine meta e altro.
Configura dimensioni e quantità: puoi impostare limiti minimi e massimi di larghezza e altezza, parole chiave da includere o escludere nell'URL, limite massimo di estrazione, numero di processi simultanei e dimensione massima per singola immagine.
Imposta denominazione e download: puoi usare segnaposto come {name}, {index}, {ext}, {host}, {width}x{height} per generare i nomi dei file; i nomi duplicati verranno numerati automaticamente.
Salva le impostazioni frequenti: fai clic su “Salva impostazioni” per conservare parametri comuni come formato, sorgente, dimensioni e strategia di download.
Avvia l'analisi: dopo aver fatto clic su “Avvia analisi”, lo strumento raccoglierà gli indirizzi delle immagini, rimuoverà i duplicati, rileverà le dimensioni e applicherà i criteri di filtro.
Anteprima e download: l'area dei risultati mostra i primi 20 elementi; gli altri risultati verranno comunque inclusi nella creazione del pacchetto ZIP, nel download degli elementi selezionati, nella copia dell'elenco URL e nell'esportazione CSV/JSON.

Domande frequenti

R: Alcuni siti limitano la lettura delle risorse, quindi durante la creazione del pacchetto potrebbe non essere possibile ottenere il contenuto binario delle immagini. Puoi cambiare strategia di download oppure esportare l'elenco degli URL e gestirlo successivamente.

R: Puoi scegliere tra priorità all'alta risoluzione, priorità a 1x, priorità a 2x o mantenere tutti i candidati, ideale per estrarre immagini di diverse dimensioni da pagine responsive.

R: Sì. Selezionando la sorgente delle immagini di sfondo CSS, verranno analizzate le immagini url() negli attributi style, nei tag style, nei CSS esterni e in @import.

R: Nei parametri di filtro imposta il limite minimo di larghezza e di altezza, ad esempio larghezza non inferiore a 800px e altezza non inferiore a 600px, per filtrare piccole icone e immagini segnaposto.

R: Per mantenere l'interfaccia chiara, l'anteprima e la tabella mostrano solo i primi 20 elementi; il pacchetto ZIP, l'esportazione degli URL, i dettagli CSV e JSON includeranno tutti i risultati analizzati.

R: Durante il download o la creazione del pacchetto, i nomi dei file vengono prima generati in base alle regole di denominazione; in caso di nomi duplicati, verrà aggiunto un numero dopo il nome originale del file per evitare di sovrascrivere i risultati esistenti.