ColorMind · 图片配色提取

拖拽图片到此处，或点击上传

支持批量上传 JPG / PNG / WebP，可同时选择多张

提取中... 0%

' + t('empty_list') + '

'; imageCount.textContent = '0'; return; } imageListSection.style.display = 'block'; imageCount.textContent = state.images.length; let html = ''; for (const entry of state.images) { if (!entry || !entry.loaded) continue; const activeClass = entry.id === state.selectedId ? ' active' : ''; html += '

' + '

' + entry.name + '

' + '

' + entry.width + ' × ' + entry.height + '

' + '

' + '' + '

'; } imageListBody.innerHTML = html || '

' + t('empty_list') + '

'; // 绑定事件 imageListBody.querySelectorAll('.image-item').forEach(el => { const id = parseInt(el.dataset.id); if (!id) return; el.addEventListener('click', (e) => { if (e.target.closest('.image-item-remove')) return; selectImage(id); }); }); imageListBody.querySelectorAll('.image-item-remove').forEach(el => { const id = parseInt(el.dataset.id); if (!id) return; el.addEventListener('click', (e) => { e.stopPropagation(); removeImage(id); }); }); } // ========== 颜色提取和调色板渲染 ========== async function extractAndRender() { const entry = getSelected(); if (!entry) return; if (state.isExtracting) return; state.isExtracting = true; if (progressWrap) progressWrap.classList.add('show'); if (progressText) progressText.textContent = t('extracting'); if (progressPercent) progressPercent.textContent = '0%'; if (progressFill) progressFill.style.width = '0%'; try { const colors = await extractColors(entry); state.palettes[entry.id] = colors; renderPalette(entry.id); } catch (err) { console.error('Extraction error:', err); showToast(t('error_render')); } finally { state.isExtracting = false; if (progressWrap) progressWrap.classList.remove('show'); } } function extractColors(entry) { return new Promise((resolve, reject) => { try { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const w = entry.width, h = entry.height; canvas.width = w; canvas.height = h; ctx.drawImage(entry.img, 0, 0); const imageData = ctx.getImageData(0, 0, w, h); const pixels = imageData.data; // 简单中值切割颜色量化 const colorMap = {}; for (let i = 0; i < pixels.length; i += 16) { // 采样 const r = pixels[i], g = pixels[i+1], b = pixels[i+2]; if (r === undefined || g === undefined || b === undefined) continue; const key = Math.round(r/16)*16 + ',' + Math.round(g/16)*16 + ',' + Math.round(b/16)*16; colorMap[key] = (colorMap[key] || 0) + 1; } const sorted = Object.entries(colorMap).sort((a, b) => b[1] - a[1]); const top = sorted.slice(0, state.colorCount).map(entry => { const [r, g, b] = entry[0].split(',').map(Number); return { r: Math.min(255, Math.max(0, r)), g: Math.min(255, Math.max(0, g)), b: Math.min(255, Math.max(0, b)), count: entry[1] }; }); resolve(top); } catch (e) { reject(e); } }); } function renderPalette(id) { try { const colors = state.palettes[id]; if (!colors || !Array.isArray(colors)) return; const format = state.colorFormat; const bg = state.previewBg; if (!paletteGrid) return; let html = ''; for (const c of colors) { if (!c) continue; const hex = '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join(''); let colorStr; switch (format) { case 'rgb': colorStr = `rgb(${c.r}, ${c.g}, ${c.b})`; break; case 'hsl': { const [h, s, l] = rgbToHsl(c.r, c.g, c.b); colorStr = `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`; break; } case 'oklch': { colorStr = `oklch(0.6 0.15 250)`; // 简化 break; } default: colorStr = hex; } const luminance = getLuminance(c.r, c.g, c.b); const textClass = luminance > 0.5 ? 'auto-light' : 'auto-dark'; html += `

${colorStr} Copy

`; } paletteGrid.innerHTML = html; // 点击复制 paletteGrid.querySelectorAll('.palette-block').forEach(block => { block.addEventListener('click', () => { const val = block.querySelector('.color-val'); if (val) { navigator.clipboard.writeText(val.textContent).then(() => { showToast(t('toast_copied') + ': ' + val.textContent); }).catch(() => { // 降级 const range = document.createRange(); range.selectNode(val); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy'); showToast(t('toast_copied')); }); } }); }); // 预览面板 if (previewOriginImg && entry = getSelected()) { previewOriginImg.src = entry.img.src; if (previewDims) previewDims.textContent = entry.width + ' × ' + entry.height; } if (previewCardBars) { const barsHtml = colors.map(c => { const hex = '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join(''); return `

`; }).join(''); previewCardBars.innerHTML = barsHtml; } // 根据背景切换卡片样式 if (previewCard) { previewCard.classList.toggle('dark-bg', bg === 'dark'); previewCard.classList.toggle('light-bg', bg === 'light'); } } catch (e) { console.error('Render palette error:', e); } } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b), min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = ((g - b) / d + (g < b ? 6 : 0)) * 60; break; case g: h = ((b - r) / d + 2) * 60; break; case b: h = ((r - g) / d + 4) * 60; break; } } return [h || 0, s * 100, l * 100]; } // ========== Toast ========== let toastTimer = null; function showToast(msg) { if (!toastEl) return; toastEl.textContent = msg; toastEl.classList.add('show'); clearTimeout(toastTimer); toastTimer = setTimeout(() => { toastEl.classList.remove('show'); }, 2500); } // ========== 事件监听 ========== if (uploadArea && fileInput) { uploadArea.addEventListener('click', () => fileInput.click()); uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); }); uploadArea.addEventListener('dragleave', () => { uploadArea.classList.remove('dragover'); }); uploadArea.addEventListener('drop', (e) => { e.preventDefault(); uploadArea.classList.remove('dragover'); const files = e.dataTransfer.files; if (files && files.length) addImages(files); }); fileInput.addEventListener('change', () => { if (fileInput.files && fileInput.files.length) { addImages(fileInput.files); fileInput.value = ''; } }); } if (clearAllBtn) { clearAllBtn.addEventListener('click', resetAll); } if (copyAllBtn) { copyAllBtn.addEventListener('click', async () => { const entry = getSelected(); if (!entry) return; const colors = state.palettes[entry.id]; if (!colors || !colors.length) { showToast(t('toast_no_colors')); return; } const format = state.colorFormat; const lines = colors.map(c => { if (format === 'hex') return '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join(''); if (format === 'rgb') return `rgb(${c.r}, ${c.g}, ${c.b})`; if (format === 'hsl') { const [h,s,l] = rgbToHsl(c.r,c.g,c.b); return `hsl(${Math.round(h)},${Math.round(s)}%,${Math.round(l)}%)`; } return `oklch(0.6 0.15 250)`; }); try { await navigator.clipboard.writeText(lines.join('\n')); showToast(t('toast_copied')); } catch (e) { console.warn('Clipboard write failed', e); showToast('复制失败，请手动选择'); } }); } if (exportBtn && exportMenu) { exportBtn.addEventListener('click', (e) => { e.stopPropagation(); exportMenu.classList.toggle('show'); }); document.addEventListener('click', (e) => { if (!e.target.closest('.btn-wrap')) { exportMenu.classList.remove('show'); } }); exportMenu.querySelectorAll('button').forEach(btn => { btn.addEventListener('click', () => { const type = btn.dataset.export; exportPalette(type); exportMenu.classList.remove('show'); }); }); } function exportPalette(type) { const entry = getSelected(); if (!entry) return; const colors = state.palettes[entry.id]; if (!colors || !colors.length) { showToast(t('error_export')); return; } let content = ''; const name = entry.name.replace(/\.[^.]+$/, ''); switch (type) { case 'css': content = ':root {\n' + colors.map((c, i) => { const hex = '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join(''); return ` --color-${name}-${i+1}: ${hex};`; }).join('\n') + '\n}'; break; case 'sass': content = colors.map((c, i) => { const hex = '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join(''); return `$color-${name}-${i+1}: ${hex};`; }).join('\n'); break; case 'tailwind': content = 'module.exports = {\n theme: {\n extend: {\n colors: {\n ' + name + ': {\n' + colors.map((c, i) => { const hex = '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join(''); return ` '${i+1}': '${hex}',`; }).join('\n') + '\n }\n }\n }\n }\n}'; break; case 'json': const jsonObj = { palette: name, colors: colors.map(c => ({ hex: '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join(''), rgb: [c.r, c.g, c.b] })) }; content = JSON.stringify(jsonObj, null, 2); break; } const blob = new Blob([content], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = name + '-palette.' + (type === 'json' ? 'json' : type === 'css' ? 'css' : type === 'sass' ? 'scss' : 'js'); a.click(); URL.revokeObjectURL(url); } if (downloadPaletteBtn) { downloadPaletteBtn.addEventListener('click', () => { const entry = getSelected(); if (!entry) return; // 简单截图：用canvas绘制色块 const colors = state.palettes[entry.id]; if (!colors || !colors.length) return; const canvas = document.createElement('canvas'); canvas.width = colors.length * 80; canvas.height = 80; const ctx = canvas.getContext('2d'); colors.forEach((c, i) => { ctx.fillStyle = '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join(''); ctx.fillRect(i * 80, 0, 80, 80); }); canvas.toBlob(blob => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = (entry.name.replace(/\.[^.]+$/, '') || 'palette') + '-palette.png'; a.click(); URL.revokeObjectURL(url); }, 'image/png'); }); } if (reExtractBtn) { reExtractBtn.addEventListener('click', () => { const entry = getSelected(); if (entry) { delete state.palettes[entry.id]; extractAndRender(); } }); } // ========== 初始化 ========== function init() { initModeSelectors(); applyTranslations(); // 如果已有图片（可能从外部加载），则显示 if (state.images.length > 0 && state.selectedId) { sectionsVisible(); renderImageList(); extractAndRender(); } } // 等待DOM就绪 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // 全局错误监控 window.addEventListener('error', function(e) { console.error('[ColorMind Global Error]', e.error || e.message); }); window.addEventListener('unhandledrejection', function(e) { console.error('[ColorMind Unhandled Rejection]', e.reason); }); })();