Zum Hauptinhalt springen
claw
am
tools
Werkzeuge
Dokumente
Daoark
EN
Startseite
Startseite
/
Bildwerkzeuge
›
0) { if (mx === r) h = ((g-b)/d) % 6; else if (mx === g) h = (b-r)/d + 2; else h = (r-g)/d + 4; h *= 60; if (h < 0) h += 360; } return [Math.round(h), Math.round(s*100), Math.round(v*100)]; } function render() { if (!img) return; curZoom = parseFloat(zoomInput.value); zv.textContent = curZoom; cv.width = img.width * curZoom; cv.height = img.height * curZoom; ctx.imageSmoothingEnabled = false; ctx.drawImage(img, 0, 0, cv.width, cv.height); } zoomInput.addEventListener('input', render); fileInput.addEventListener('change', function(e) { clearError(); var file = e.target.files[0]; if (!file) return; var reader = new FileReader(); reader.onload = function(ev) { img = new Image(); img.onload = render; img.onerror = function() { showError('图片加载失败'); }; img.src = ev.target.result; }; reader.readAsDataURL(file); }); cv.addEventListener('mousemove', function(e) { if (!img) return; var rect = cv.getBoundingClientRect(); var x = Math.floor((e.clientX - rect.left) / curZoom); var y = Math.floor((e.clientY - rect.top) / curZoom); if (x < 0 || y < 0 || x >= img.width || y >= img.height) { loupe.style.display = 'none'; return; } var data = ctx.getImageData(x * curZoom, y * curZoom, 1, 1).data; var hex = rgbToHex(data[0], data[1], data[2]); loupe.style.display = 'block'; loupe.style.left = (e.clientX + 20) + 'px'; loupe.style.top = (e.clientY + 20) + 'px'; loupe.style.background = hex; }); cv.addEventListener('mouseleave', function() { loupe.style.display = 'none'; }); cv.addEventListener('click', function(e) { if (!img) { showError('请先上传图片'); return; } var rect = cv.getBoundingClientRect(); var x = Math.floor((e.clientX - rect.left) / curZoom); var y = Math.floor((e.clientY - rect.top) / curZoom); if (x < 0 || y < 0 || x >= img.width || y >= img.height) return; var data = ctx.getImageData(x * curZoom, y * curZoom, 1, 1).data; var hex = rgbToHex(data[0], data[1], data[2]); var hsv = rgbToHsv(data[0], data[1], data[2]); lastPicked.unshift({ x: x, y: y, hex: hex, r: data[0], g: data[1], b: data[2], h: hsv[0], s: hsv[1], v: hsv[2] }); if (lastPicked.length > 8) lastPicked.pop(); var lines = lastPicked.map(function(p, i) { return '[' + (i+1) + '] 位置(' + p.x + ',' + p.y + ') HEX ' + p.hex + ' RGB(' + p.r + ',' + p.g + ',' + p.b + ') HSV(' + p.h + '°,' + p.s + '%,' + p.v + '%)'; }); resultContent.innerHTML = '
' + lastPicked.map(function(p){ return '
'; }).join('') + '
' + lines.join('\n') + '
'; resultMeta.textContent = '点击位置: (' + x + ', ' + y + ') 当前颜色: ' + hex; showResult(); }); document.getElementById('btn-clear').addEventListener('click', function() { fileInput.value = ''; zoomInput.value = '1'; zv.textContent = '1'; img = null; lastPicked = []; cv.width = 0; cv.height = 0; resultArea.classList.remove('show'); clearError(); }); })();