Color Palette - clawam tools

'; for (var i = 0; i < colors.length; i++) { var c = colors[i]; var hex = rgbToHex(c); html += '

' + hex + '
rgb(' + Math.round(c.r) + ',' + Math.round(c.g) + ',' + Math.round(c.b) + ')

'; } html += '

'; return html; } var origImg = null; $('file').addEventListener('change', function(e) { var f = e.target.files[0]; if (!f) return; var r = new FileReader(); r.onload = function(ev) { origImg = new Image(); origImg.onload = function() { showResult('

已加载: ' + origImg.width + ' × ' + origImg.height + '

', '图片已加载'); }; origImg.src = ev.target.result; }; r.readAsDataURL(f); }); function extract() { if (!origImg) { showError('请先选图片'); return; } var k = parseInt(getVal('k'), 10); if (!(k >= 3 && k <= 8)) { showError('k 3-8'); return; } var canvas = document.createElement('canvas'); var maxW = 200; var scale = Math.min(1, maxW / origImg.width); canvas.width = Math.round(origImg.width * scale); canvas.height = Math.round(origImg.height * scale); var ctx = canvas.getContext('2d'); ctx.drawImage(origImg, 0, 0, canvas.width, canvas.height); var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); var pixels = []; for (var i = 0; i < imgData.data.length; i += 4) { pixels.push({ r: imgData.data[i], g: imgData.data[i + 1], b: imgData.data[i + 2] }); } // 降采样 if (pixels.length > 5000) { var step = Math.ceil(pixels.length / 5000); var sampled = []; for (var j = 0; j < pixels.length; j += step) sampled.push(pixels[j]); pixels = sampled; } var result = kmeans(pixels, k); var colors = result.map(function(r) { return r.rgb; }); showResult(swatchHtml(colors), k + ' 个主色(按出现频次)'); } function scheme() { var baseStr = getVal('base'); var base; if (baseStr) { base = parseColor(baseStr); if (!base) { showError('基准色格式错(用 #ff5733 或 rgb(255,87,51))'); return; } } else if (origImg) { // 用主色的第一个 var canvas = document.createElement('canvas'); canvas.width = origImg.width; canvas.height = origImg.height; var ctx = canvas.getContext('2d'); ctx.drawImage(origImg, 0, 0); var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); var colors = {}; for (var i = 0; i < imgData.data.length; i += 4) { var key = imgData.data[i] + ',' + imgData.data[i + 1] + ',' + imgData.data[i + 2]; colors[key] = (colors[key] || 0) + 1; } var best = '', bestC = 0; for (var k in colors) if (colors[k] > bestC) { bestC = colors[k]; best = k; } var parts = best.split(','); base = { r: parseInt(parts[0]), g: parseInt(parts[1]), b: parseInt(parts[2]) }; } else { showError('请输入基准色或选图片'); return; } var schemeType = getVal('scheme'); if (schemeType === 'none') { showError('请选配色方案'); return; } var out = genScheme(base, schemeType); showResult(swatchHtml(out), schemeType + ' 配色,基准 ' + rgbToHex(base)); } function exportCode() { var text = $('result-meta').textContent; var colors = []; var swatches = $('result-content').querySelectorAll('div[style*="width:120px"]'); swatches.forEach(function(s) { var t = s.textContent; var m = t.match(/#[0-9a-fA-F]{6}/); if (m) colors.push(m[0]); }); if (colors.length === 0) { showError('请先生成颜色'); return; } var css = ':root {\n' + colors.map(function(c, i) { return ' --color-' + (i + 1) + ': ' + c + ';'; }).join('\n') + '\n}'; var tw = colors.map(function(c, i) { return ' primary-' + (i + 1) + ': "'' + c + '"', ';'; }).join('\n'); showResult('--- CSS 变量 ---\n' + css + '\n\n--- Tailwind config ---\ntheme: {\n extend: {\n colors: {\n' + tw + '\n }\n }\n}', '已导出 ' + colors.length + ' 个颜色'); } $('btn-extract').addEventListener('click', extract); $('btn-scheme').addEventListener('click', scheme); $('btn-export').addEventListener('click', exportCode); $('btn-clear').addEventListener('click', function() { $('file').value = ''; $('base').value = ''; origImg = null; var ra = $('result-area'); ra.hidden = true; ra.style.display = 'none'; var em = $('error-msg'); em.hidden = true; em.style.display = 'none'; }); })();