Webページ画像一括ダウンローダー

Webページから指定形式の画像を一括抽出し、サイズでの絞り込み、リネーム、ZIP圧縮、リンクダウンロードに対応。

バグ報告

ブラウザ実行モード: データはブラウザ内で処理され、サーバーにはアップロードされません。

速度と安定性: 処理速度はデバイスとブラウザに依存します。大量のバッチ作業では、デスクトップ版の方が安定する場合があります。

ツールを読み込み中です。お待ちください...

オンラインツールを読み込めない、または実行できない場合は、デスクトップツールをお試しください。 https://tools.yikeaigc.com/

ツール使用状況

旧バージョンに戻す

まずソースとフィルターを設定し、解析・プレビュー・ダウンロードします。

Web URL、HTML ソース、ローカル HTML ファイル、画像直リンク一覧に対応。複数入力時はプレビューを先頭 20 件のみ表示し、ダウンロードとエクスポートは全件を処理します。

img / srcset CSS 背景画像サイズフィルター ZIP 圧縮設定を保存可

ローカル HTML ファイル ファイル未選択

複数の HTML ファイルを選択すると、ここに先頭 20 件のファイル名を表示します。解析時は全ファイルを処理します。

入力ソースを選択

まず画像の抽出元を選びます。Web ページ取得時は既定でプロキシを使用します。対象サイトでアクセス制限がある場合は、HTML の貼り付けまたはローカル HTML ファイルを使用してください。

単一WebページURL1ページの画像を抽出 複数WebページURL1行に1ページURL HTMLを貼り付けクロスドメイン制限ページ向け ローカルHTMLファイルファイルを一括読み込み 画像URL一覧直リンクをDL・圧縮

WebページURL 先に URL を入力し、次の手順で形式とサイズを設定してください。

処理とダウンロード方法を設定

既定のファイル名テンプレートのまま、できるだけ元の名前を使用することをおすすめします。重複時は数字を自動追加します。

名前付けとダウンロードダウンロードまたは圧縮時に適用

リネーム規則使用可：{index} {name} {ext} {host} {domain} {page} {source} {width} {height} {width}x{height} {date}

並べ替え

ダウンロード方式

Webページ/画像の取得時にサーバープロキシを使用外部CSSと@import画像を抽出拡張子なし/パラメータ付き画像を認識

処理開始先にソースとフィルター設定を完了してください

結果をプレビュー・ダウンロード

結果欄は一部のプレビューのみ表示します。ZIP、URLリスト、CSV、JSONには抽出結果がすべて含まれます。

ダウンロードとエクスポート先に解析して結果を出してから、ダウンロードをクリックしてください

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

手順

ソフトウェア使用方法

入力元を選択：単一のWebページURL、複数のWebページURL、HTMLソースの貼り付け、ローカルHTMLファイル、画像URLリストに対応しています。
フィルター条件を設定：jpg、png、webp、gif、svg、avifなどの形式を選択し、img、srcset、遅延読み込み属性、CSS背景画像、metaカバーなどのソースから抽出できます。
サイズと数量を設定：幅・高さの上下限、URLに含める／除外するキーワード、抽出数の上限、同時実行数、単一画像サイズの上限を設定できます。
命名とダウンロードを設定：{name}、{index}、{ext}、{host}、{width}x{height}などのプレースホルダーでファイル名を生成でき、同名の場合は自動で番号が付与されます。
よく使う設定を保存：「設定を保存」をクリックすると、形式、ソース、サイズ、ダウンロード方針などのよく使うパラメータを保持できます。
解析を開始：「解析を開始」をクリックすると、ツールが画像アドレスを収集し、重複を除去し、サイズを識別してフィルター条件を適用します。
プレビューとダウンロード：結果エリアには先頭20件が表示され、残りの結果もZIPパッケージ化、選択ダウンロード、URLリストのコピー、CSV/JSONエクスポートの対象になります。

よくある質問

答：一部のサイトではリソースの読み取りが制限されており、パッケージ化時に画像のバイナリ内容を取得できない場合があります。ダウンロード方針を切り替えるか、URLリストをエクスポートしてから処理してください。

答：高解像度を優先、1xを優先、2xを優先、またはすべての候補を保持するよう選択できます。レスポンシブページ内の複数サイズ画像の抽出に適しています。

答：できます。CSS背景画像ソースにチェックを入れると、style属性、styleタグ、外部CSS、@import内のurl()画像を解析します。

答：フィルターパラメータで幅の下限と高さの下限を設定します。たとえば幅800px以上、高さ600px以上に設定すると、小さなアイコンやプレースホルダー画像を除外できます。

回答：画面を見やすく保つため、プレビューと表には先頭20件のみを表示します。ZIPパッケージ、URLエクスポート、CSVおよびJSONの詳細には、解析結果がすべて含まれます。

回答：ダウンロードまたはパッケージ化の際、まず命名規則に従ってファイル名を生成し、同名のファイルがある場合は元のファイル名の末尾に数字を追加して、既存の結果が上書きされないようにします。

Webページ画像一括ダウンローダー

ツールを読み込み中です。お待ちください...

ツール使用状況

入力ソースを選択

形式・取得元・サイズを設定

処理とダウンロード方法を設定

結果をプレビュー・ダウンロード

手順

ソフトウェア使用方法

よくある質問

問：一部の画像をZIPにまとめられないのはなぜですか？

問：srcset画像はどのように処理されますか？

問：背景画像を抽出できますか？

問：大きい画像だけをダウンロードするには？

質問：一括ページで一部の結果しか表示されないのはなぜですか？

質問：ファイル名が重複した場合はどうなりますか？

関連ツール

画像一括ページ番号追加ツール

動画サムネイル一括作成ツール

QRコード一括認識ツール

画像類似度検出（pHashアルゴリズム）

GIF静止画変換ツール

ワードクラウド生成ツール

漢字の倒立・鏡像画像生成ツール

GIFアニメトリミングツール

オンライン画像編集

スマート画像切り抜きツール