Untitled
unknown
javascript
22 days ago
3.7 kB
1
Indexable
Never
document.addEventListener("DOMContentLoaded", function () { const imageInput = document.getElementById("imageInput"); const colorCodesContainer = document.getElementById("colorCodes"); const getColorButton = document.getElementById("getColorButton"); const imagePreview = document.getElementById("imagePreview"); document .querySelector(".image-input-container") .addEventListener("click", function () { imageInput.click(); }); imageInput.addEventListener("change", function (e) { const file = e.target.files[0]; if (file) { const fileName = file.name; document.querySelector(".text-gray-500").textContent = fileName; const reader = new FileReader(); reader.onload = function () { imagePreview.src = reader.result; imagePreview.classList.remove("hidden"); }; reader.readAsDataURL(file); } }); getColorButton.addEventListener("click", function () { const file = imageInput.files[0]; if (file) { const reader = new FileReader(); reader.onload = function () { const image = new Image(); image.src = reader.result; image.onload = function () { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0, image.width, image.height); const imageData = ctx.getImageData( 0, 0, image.width, image.height ).data; const colorCounts = {}; for (let i = 0; i < imageData.length; i += 4) { const color = `rgb(${imageData[i]}, ${imageData[i + 1]}, ${ imageData[i + 2] })`; colorCounts[color] = (colorCounts[color] || 0) + 1; } const sortedColors = Object.keys(colorCounts).sort( (a, b) => colorCounts[b] - colorCounts[a] ); colorCodesContainer.innerHTML = ""; const maxColorsToShow = 10; for ( let i = 0; i < Math.min(maxColorsToShow, sortedColors.length); i++ ) { const color = sortedColors[i]; const colorBox = document.createElement("div"); colorBox.style.backgroundColor = color; colorBox.style.width = "50px"; colorBox.style.height = "50px"; colorBox.classList.add("rounded", "shadow", "color-code"); colorBox.setAttribute("data-clipboard-text", color); colorBox.addEventListener("click", copyColorCode); colorCodesContainer.appendChild(colorBox); } }; }; reader.readAsDataURL(file); } }); function copyColorCode(event) { const colorCode = event.target.getAttribute("data-clipboard-text"); const tempTextArea = document.createElement("textarea"); tempTextArea.value = colorCode; document.body.appendChild(tempTextArea); tempTextArea.select(); document.execCommand("copy"); document.body.removeChild(tempTextArea); const copyMessage = document.createElement("div"); copyMessage.innerText = "Color code copied!"; copyMessage.classList.add( "bg-green-300", "text-green-900", "text-sm", "py-2", "px-4", "rounded", "absolute", "bottom-0", "right-0", "mr-6", "mb-6" ); document.body.appendChild(copyMessage); setTimeout(function () { copyMessage.remove(); }, 2000); } });