Web Sayfası Görselleri Toplu İndirici

Web sayfalarından belirli formatlardaki görselleri toplu olarak çıkarır; boyut filtreleme, yeniden adlandırma, ZIP olarak paketleme ve bağlantıdan indirmeyi destekler.

Hata bildirimi

Tarayıcı yürütme modu: Verileriniz tarayıcınızda işlenir ve sunucuya yüklenmez.

Hız ve kararlılık: İşleme hızı cihazınıza ve tarayıcınıza bağlıdır. Büyük toplu işler için masaüstü sürümü daha kararlı olabilir.

Araç yükleniyor, lütfen bekleyin...

Çevrimiçi araç yüklenmez veya çalışmazsa masaüstü aracını deneyin. https://tools.yikeaigc.com/

Araç Kullanımı

Eski sürüme dön

Önce kaynak ve filtreleri ayarlayın, sonra ayrıştırın, önizleyin ve indirin.

Web URL, HTML kaynak kodu, yerel HTML dosyası ve doğrudan görsel bağlantı listeleri desteklenir. Toplu girişte yalnızca ilk 20 önizleme öğesi gösterilir; indirme ve dışa aktarma tüm sonuçları işler.

img / srcset CSS arka plan görseli Boyut filtresi ZIP paketleme Ayarlar kaydedilebilir

Yerel HTML dosyası Dosya seçilmedi

Birden çok HTML dosyası seçilince burada ilk 20 dosya adı gösterilir; ayrıştırma tüm dosyaları işler.

Giriş kaynağı seçin

Önce görsellerin nereden çıkarılacağını belirleyin. Web sayfası çekilirken proxy varsayılan olarak açıktır; hedef site erişimi kısıtlarsa HTML yapıştırmayı veya yerel HTML dosyasını kullanın.

Tek web URL'siBir sayfanın görsellerini çıkar Toplu web URL'leriHer satıra bir sayfa adresi HTML yapıştırÇapraz kaynak kısıtlı sayfalar için Yerel HTML dosyasıDosyaları toplu içe aktar Görsel URL listesiDirekt bağlantı indir ve paketle

Web URL Önce URL girmeniz, ardından sonraki adımda biçim ve boyutu ayarlamanız önerilir.

İşleme ve indirme ayarları

Varsayılan dosya adı şablonunu korumanız önerilir; görseller mümkün olduğunca özgün adlarını kullanır, aynı ad varsa otomatik sayı eklenir.

Adlandırma ve indirmeİndirme veya paketlemede geçerli

Yeniden adlandırma kuralıKullanılabilir: {index} {name} {ext} {host} {domain} {page} {source} {width} {height} {width}x{height} {date}

Sırala

İndirme stratejisi

Web sayfası/görsel çekmede sunucu proxy kullan Harici CSS ve @import görsellerini çıkar Uzantısız/parametreli görselleri tanı

İşlemi başlatÖnce kaynak ve filtre ayarlarını tamamlayın

Sonuçları önizle ve indir

Sonuç alanı yalnızca kısmi önizleme gösterir; ZIP, URL listesi, CSV ve JSON tüm çıkarılan sonuçları kapsar.

İndirme ve dışa aktarmaÖnce sonuçları ayrıştırın, sonra indirin

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

Talimatlar

Yazılım Kullanım Talimatları

Giriş kaynağını seçin:Tek bir web sayfası URL’si, toplu web sayfası URL’leri, HTML kaynak kodu yapıştırma, yerel HTML dosyası ve görsel URL listesi desteklenir.
Filtre koşullarını ayarlayın:jpg, png, webp, gif, svg, avif gibi formatları seçin; img, srcset, lazy load özellikleri, CSS arka plan görselleri, meta kapak görselleri gibi kaynaklardan çıkarım yapın.
Boyut ve sayı yapılandırması:Genişlik ve yükseklik alt/üst sınırları, URL dahil etme veya hariç tutma anahtar kelimeleri, çıkarım sayısı üst sınırı, eşzamanlı işlem sayısı ve tek görsel boyutu üst sınırı ayarlanabilir.
Adlandırma ve indirme ayarları:Dosya adı oluşturmak için {name}, {index}, {ext}, {host}, {width}x{height} gibi yer tutucular kullanılabilir; aynı ada sahip dosyalar otomatik olarak numaralandırılır.
Sık kullanılan ayarları kaydedin:“Ayarları kaydet”e tıklayarak format, kaynak, boyut, indirme stratejisi gibi sık kullanılan parametreleri saklayabilirsiniz.
Analizi başlatın:“Analizi başlat”a tıkladıktan sonra araç görsel adreslerini toplar, yinelenenleri kaldırır, boyutları tanır ve filtre koşullarını uygular.
Önizleme ve indirme:Sonuç alanında ilk 20 öğe gösterilir; kalan sonuçlar yine de ZIP paketleme, seçili indirme, URL listesi kopyalama ve CSV/JSON dışa aktarma işlemlerine dahil edilir.

Sıkça Sorulan Sorular

Cevap: Bazı siteler kaynak okumasını kısıtlar; paketleme sırasında görselin ikili içeriği alınamayabilir. İndirme stratejisini değiştirebilir veya URL listesini dışa aktardıktan sonra işleyebilirsiniz.

Cevap: Yüksek çözünürlüğe öncelik, 1x’e öncelik, 2x’e öncelik veya tüm adayları saklama seçenekleri seçilebilir; duyarlı sayfalardaki çok boyutlu görselleri çıkarmak için uygundur.

Cevap: Evet. CSS arka plan görseli kaynağını işaretledikten sonra style özelliği, style etiketleri, harici CSS ve @import içindeki url() görselleri ayrıştırılır.

Cevap: Filtre parametrelerinde genişlik alt sınırı ve yükseklik alt sınırı ayarlayın; örneğin genişlik en az 800px, yükseklik en az 600px olursa küçük simgeler ve yer tutucu görseller filtrelenir.

Cevap: Arayüzü sade tutmak için önizleme ve tablo yalnızca ilk 20 öğeyi gösterir; ZIP paketleme, URL dışa aktarma, CSV ve JSON ayrıntıları tüm ayrıştırma sonuçlarını içerir.

Cevap: İndirme veya paketleme sırasında dosya adı önce adlandırma kurallarına göre oluşturulur; aynı ada rastlanırsa mevcut sonuçların üzerine yazılmasını önlemek için özgün dosya adının sonuna sayı eklenir.