Pemuat Turun Imej Laman Web Secara Pukal

Ekstrak imej dalam format tertentu secara pukal daripada laman web, menyokong penapisan saiz, penamaan semula, pembungkusan ZIP dan muat turun pautan.

Laporan pepijat

Mod pelaksanaan pelayar: Data anda diproses dalam penyemak imbas dan tidak dimuat naik ke pelayan.

Kelajuan dan kestabilan: Kelajuan pemprosesan bergantung pada peranti dan pelayar anda. Untuk kerja kelompok besar, versi desktop mungkin lebih stabil.

Memuatkan alat, sila tunggu...

Jika alat dalam talian tidak dapat dimuatkan atau dijalankan, cuba alat desktop. https://tools.yikeaigc.com/

Penggunaan Alat

Kembali ke versi lama

Tetapkan sumber dan penapis dahulu, kemudian huraikan, pratonton dan muat turun.

Menyokong URL web, kod sumber HTML, fail HTML setempat dan senarai pautan terus imej. Untuk input pukal, hanya 20 pratonton pertama dipaparkan; muat turun dan eksport memproses semua hasil.

img / srcset Imej latar CSS Penapis saiz Paket ZIP Tetapan boleh disimpan

Fail HTML setempat Tiada fail dipilih

Selepas memilih berbilang fail HTML, 20 nama fail pertama dipaparkan di sini; semua fail diproses semasa huraian.

Pilih sumber input

Tentukan dahulu dari mana imej akan diekstrak. Semasa mengambil halaman web, proksi dihidupkan secara lalai; jika tapak sasaran mengehadkan akses, gunakan tampal HTML atau fail HTML setempat.

URL web tunggalEkstrak imej daripada satu halaman URL web pukalSatu alamat halaman setiap baris Tampal HTMLSesuai untuk halaman terhad merentas domain Fail HTML setempatBoleh import fail secara pukal Senarai URL imejMuat turun dan bungkus pautan terus

URL web Disyorkan isi URL dahulu, kemudian tetapkan format dan saiz pada langkah seterusnya.

Tetapkan pemprosesan dan muat turun

Disyorkan kekalkan templat nama fail lalai supaya imej menggunakan nama asal; nombor ditambah automatik jika nama sama.

Nama dan muat turunBerkuat kuasa semasa muat turun atau pakej

Peraturan nama semulaTersedia: {index} {name} {ext} {host} {domain} {page} {source} {width} {height} {width}x{height} {date}

Isih

Strategi muat turun

Guna proksi pelayan semasa mengambil web/imej Ekstrak imej CSS luaran dan @import Kenal pasti imej tanpa sambungan/berparameter

Mula prosesLengkapkan sumber dan penapis dahulu

Pratonton dan muat turun hasil

Kawasan hasil hanya papar pratonton separa; ZIP, senarai URL, CSV dan JSON meliputi semua hasil ekstrak.

Muat turun dan eksportHurai hasil dahulu, kemudian klik muat turun

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

Arahan

Arahan Penggunaan Perisian

Pilih sumber input:Menyokong URL laman web tunggal, URL laman web pukal, tampal kod sumber HTML, fail HTML tempatan dan senarai URL imej.
Tetapkan syarat penapisan:Pilih format seperti jpg, png, webp, gif, svg, avif, dan ekstrak mengikut sumber seperti img, srcset, atribut pemuatan malas, imej latar CSS, kulit muka meta dan sebagainya.
Konfigurasikan saiz dan jumlah:Boleh menetapkan had atas dan bawah lebar serta tinggi, kata kunci URL untuk disertakan atau dikecualikan, had jumlah ekstraksi, bilangan serentak dan had saiz imej tunggal.
Tetapkan penamaan dan muat turun:Boleh menggunakan pemegang tempat seperti {name}, {index}, {ext}, {host}, {width}x{height} untuk menjana nama fail; nama yang sama akan dinomborkan secara automatik.
Simpan tetapan biasa:Klik “Simpan tetapan” untuk mengekalkan parameter biasa seperti format, sumber, saiz dan strategi muat turun.
Mulakan penguraian:Selepas mengklik “Mulakan penguraian”, alat akan mengumpul alamat imej, menyahduplikasi, mengenal pasti saiz dan menggunakan syarat penapisan.
Pratonton dan muat turun:Kawasan hasil memaparkan 20 item pertama; hasil selebihnya masih akan disertakan dalam pembungkusan ZIP, muat turun terpilih, salinan senarai URL dan eksport CSV/JSON.

Soalan Lazim

J: Sesetengah laman mengehadkan pembacaan sumber, jadi kandungan binari imej mungkin tidak dapat diperoleh semasa pembungkusan. Anda boleh menukar strategi muat turun, atau mengeksport senarai URL untuk diproses kemudian.

J: Anda boleh memilih untuk mengutamakan resolusi tinggi, mengutamakan 1x, mengutamakan 2x atau mengekalkan semua calon, sesuai untuk mengekstrak imej pelbagai saiz dalam halaman responsif.

J: Boleh. Selepas menanda sumber imej latar CSS, imej url() dalam atribut style, tag style, CSS luaran dan @import akan dihuraikan.

J: Tetapkan had bawah lebar dan had bawah tinggi dalam parameter penapisan, contohnya lebar tidak kurang daripada 800px dan tinggi tidak kurang daripada 600px, untuk menapis ikon kecil dan imej pemegang tempat.

Jawapan: Untuk memastikan antara muka kekal jelas, pratonton dan jadual hanya memaparkan 20 item pertama; pakej ZIP, eksport URL, serta butiran CSV dan JSON akan merangkumi semua hasil yang dihuraikan.

Jawapan: Semasa memuat turun atau membungkus, nama fail akan dijana terlebih dahulu mengikut peraturan penamaan. Jika terdapat nama yang sama, nombor akan ditambahkan selepas nama fail asal untuk mengelakkan hasil sedia ada ditimpa.