You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg) {
// Walt Disney Animation Studios Movie Database (Signature Color Palettes)
const disneyMovies = [
{ title: "Snow White and the Seven Dwarfs", year: 1937, r: 230, g: 210, b: 180 },
{ title: "Pinocchio", year: 1940, r: 200, g: 150, b: 100 },
{ title: "Fantasia", year: 1940, r: 20, g: 20, b: 60 },
{ title: "Dumbo", year: 1941, r: 250, g: 220, b: 230 },
{ title: "Bambi", year: 1942, r: 120, g: 140, b: 80 },
{ title: "Cinderella", year: 1950, r: 180, g: 210, b: 240 },
{ title: "Alice in Wonderland", year: 1951, r: 255, g: 200, b: 220 },
{ title: "Peter Pan", year: 1953, r: 40, g: 180, b: 80 },
{ title: "Lady and the Tramp", year: 1955, r: 180, g: 110, b: 90 },
{ title: "Sleeping Beauty", year: 1959, r: 240, g: 150, b: 200 },
{ title: "101 Dalmatians", year: 1961, r: 230, g: 230, b: 230 },
{ title: "The Sword in the Stone", year: 1963, r: 150, g: 140, b: 200 },
{ title: "The Jungle Book", year: 1967, r: 80, g: 120, b: 50 },
{ title: "The Aristocats", year: 1970, r: 240, g: 210, b: 220 },
{ title: "Robin Hood", year: 1973, r: 150, g: 190, b: 90 },
{ title: "The Many Adventures of Winnie the Pooh", year: 1977, r: 240, g: 200, b: 80 },
{ title: "The Fox and the Hound", year: 1981, r: 160, g: 130, b: 90 },
{ title: "The Black Cauldron", year: 1985, r: 60, g: 60, b: 70 },
{ title: "The Great Mouse Detective", year: 1986, r: 130, g: 110, b: 120 },
{ title: "Oliver & Company", year: 1988, r: 200, g: 150, b: 60 },
{ title: "The Little Mermaid", year: 1989, r: 50, g: 150, b: 200 },
{ title: "The Rescuers Down Under", year: 1990, r: 210, g: 160, b: 80 },
{ title: "Beauty and the Beast", year: 1991, r: 230, g: 190, b: 50 },
{ title: "Aladdin", year: 1992, r: 150, g: 80, b: 200 },
{ title: "The Lion King", year: 1994, r: 220, g: 140, b: 40 },
{ title: "Pocahontas", year: 1995, r: 140, g: 170, b: 180 },
{ title: "The Hunchback of Notre Dame", year: 1996, r: 180, g: 80, b: 50 },
{ title: "Hercules", year: 1997, r: 210, g: 160, b: 100 },
{ title: "Mulan", year: 1998, r: 180, g: 50, b: 60 },
{ title: "Tarzan", year: 1999, r: 60, g: 140, b: 70 },
{ title: "Dinosaur", year: 2000, r: 140, g: 110, b: 80 },
{ title: "The Emperor's New Groove", year: 2000, r: 200, g: 180, b: 60 },
{ title: "Atlantis: The Lost Empire", year: 2001, r: 60, g: 120, b: 160 },
{ title: "Lilo & Stitch", year: 2002, r: 90, g: 180, b: 220 },
{ title: "Treasure Planet", year: 2002, r: 160, g: 120, b: 60 },
{ title: "Brother Bear", year: 2003, r: 150, g: 160, b: 180 },
{ title: "Home on the Range", year: 2004, r: 220, g: 170, b: 80 },
{ title: "Chicken Little", year: 2005, r: 120, g: 180, b: 120 },
{ title: "Meet the Robinsons", year: 2007, r: 200, g: 220, b: 250 },
{ title: "Bolt", year: 2008, r: 180, g: 180, b: 180 },
{ title: "The Princess and the Frog", year: 2009, r: 100, g: 170, b: 90 },
{ title: "Tangled", year: 2010, r: 230, g: 180, b: 240 },
{ title: "Wreck-It Ralph", year: 2012, r: 220, g: 60, b: 50 },
{ title: "Frozen", year: 2013, r: 200, g: 230, b: 255 },
{ title: "Big Hero 6", year: 2014, r: 240, g: 40, b: 50 },
{ title: "Zootopia", year: 2016, r: 240, g: 150, b: 80 },
{ title: "Moana", year: 2016, r: 40, g: 160, b: 220 },
{ title: "Ralph Breaks the Internet", year: 2018, r: 80, g: 210, b: 240 },
{ title: "Frozen II", year: 2019, r: 180, g: 170, b: 220 },
{ title: "Raya and the Last Dragon", year: 2021, r: 80, g: 190, b: 190 },
{ title: "Encanto", year: 2021, r: 110, g: 190, b: 140 },
{ title: "Strange World", year: 2022, r: 210, g: 100, b: 160 },
{ title: "Wish", year: 2023, r: 70, g: 80, b: 160 }
];
// Downscale canvas to extract primary image colors
const canvas = document.createElement('canvas');
const scaleSize = 50;
canvas.width = scaleSize;
canvas.height = scaleSize;
const ctx = canvas.getContext('2d', { willReadFrequently: true });
// Default fallback color
let dominantColor = { r: 0, g: 0, b: 0 };
try {
ctx.drawImage(originalImg, 0, 0, scaleSize, scaleSize);
const imgData = ctx.getImageData(0, 0, scaleSize, scaleSize).data;
// Palette extraction via crude quantization (32 bins per channel)
const buckets = {};
let maxCount = 0;
for (let i = 0; i < imgData.length; i += 4) {
const r = imgData[i];
const g = imgData[i + 1];
const b = imgData[i + 2];
const a = imgData[i + 3];
if (a < 128) continue; // Skip largely transparent pixels
const qR = Math.floor(r / 32) * 32 + 16;
const qG = Math.floor(g / 32) * 32 + 16;
const qB = Math.floor(b / 32) * 32 + 16;
const key = `${qR},${qG},${qB}`;
if (!buckets[key]) buckets[key] = { r: 0, g: 0, b: 0, count: 0 };
buckets[key].r += r;
buckets[key].g += g;
buckets[key].b += b;
buckets[key].count++;
if (buckets[key].count > maxCount) {
maxCount = buckets[key].count;
dominantColor = {
r: Math.floor(buckets[key].r / maxCount),
g: Math.floor(buckets[key].g / maxCount),
b: Math.floor(buckets[key].b / maxCount)
};
}
}
} catch (e) {
console.warn("Could not extract image data. Using default logic fallback.");
}
// Find the closest Disney movie using weighted Euclidean distance
let bestMovie = null;
let minDistance = Infinity;
disneyMovies.forEach(movie => {
const rDiff = movie.r - dominantColor.r;
const gDiff = movie.g - dominantColor.g;
const bDiff = movie.b - dominantColor.b;
// Perceptually weighted coefficients (luminosity)
const dist = Math.sqrt((rDiff * rDiff * 0.3) + (gDiff * gDiff * 0.59) + (bDiff * bDiff * 0.11));
if (dist < minDistance) {
minDistance = dist;
bestMovie = movie;
}
});
// Approximate confidence based on distance (Max approx 255)
let confidence = Math.max(0, 100 - ((minDistance / 255) * 100));
// UI Construction
const wrapper = document.createElement('div');
wrapper.classList.add('wdas-tool-wrapper');
const style = document.createElement('style');
style.textContent = `
.wdas-tool-wrapper {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 24px;
box-shadow: 0 8px 24px rgba(0,0,0,0.05);
max-width: 800px;
margin: auto;
color: #202124;
}
.wdas-img-panel {
flex: 1 1 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f1f3f4;
border-radius: 8px;
padding: 16px;
}
.wdas-img-panel img {
max-width: 100%;
max-height: 350px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.wdas-res-panel {
flex: 1 1 350px;
display: flex;
flex-direction: column;
justify-content: center;
}
.wdas-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #5f6368;
font-weight: 600;
margin-bottom: 4px;
}
.wdas-title {
font-size: 1.8rem;
font-weight: 700;
color: #1a73e8;
margin: 0 0 4px 0;
line-height: 1.2;
}
.wdas-subtitle {
font-size: 1.1rem;
color: #3c4043;
margin: 0 0 20px 0;
font-weight: 500;
}
.wdas-stats {
margin-bottom: 24px;
background: #f8f9fa;
border-radius: 8px;
padding: 16px;
border: 1px solid #e8eaed;
}
.wdas-progress-bg {
height: 10px;
background: #e8eaed;
border-radius: 5px;
overflow: hidden;
margin-top: 8px;
}
.wdas-progress-bar {
height: 100%;
background: #1a73e8;
width: ${confidence.toFixed(1)}%;
transition: width 1s ease-in-out;
}
.wdas-colors {
display: flex;
gap: 16px;
margin-top: 16px;
}
.wdas-color-col {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: #5f6368;
}
.wdas-color-circle {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.wdas-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
background: #1a73e8;
color: #fff;
text-decoration: none;
font-weight: 600;
border-radius: 6px;
transition: background 0.2s;
margin-top: auto;
text-align: center;
}
.wdas-btn:hover {
background: #1557b0;
}
`;
wrapper.appendChild(style);
// Left Panel - Uploaded Image Display
const imgPanel = document.createElement('div');
imgPanel.className = 'wdas-img-panel';
const displayImg = document.createElement('img');
displayImg.src = originalImg.src;
imgPanel.appendChild(displayImg);
wrapper.appendChild(imgPanel);
// Right Panel - Search Results
const resPanel = document.createElement('div');
resPanel.className = 'wdas-res-panel';
const topLabel = document.createElement('div');
topLabel.className = 'wdas-label';
topLabel.innerText = "Cinematic Match Complete";
resPanel.appendChild(topLabel);
const titleDiv = document.createElement('h2');
titleDiv.className = 'wdas-title';
titleDiv.innerText = bestMovie.title;
resPanel.appendChild(titleDiv);
const subtitleDiv = document.createElement('p');
subtitleDiv.className = 'wdas-subtitle';
subtitleDiv.innerText = `Released in ${bestMovie.year} by Walt Disney Animation Studios`;
resPanel.appendChild(subtitleDiv);
const statsDiv = document.createElement('div');
statsDiv.className = 'wdas-stats';
// Confidence section
const confLabel = document.createElement('div');
confLabel.style.display = 'flex';
confLabel.style.justifyContent = 'space-between';
confLabel.style.fontWeight = '500';
confLabel.style.fontSize = '0.95rem';
confLabel.innerHTML = `<span>Palette Match Confidence</span><span>${confidence.toFixed(1)}%</span>`;
const pBg = document.createElement('div');
pBg.className = 'wdas-progress-bg';
const pBar = document.createElement('div');
pBar.className = 'wdas-progress-bar';
pBg.appendChild(pBar);
statsDiv.appendChild(confLabel);
statsDiv.appendChild(pBg);
// Colors visualization
const colorsDiv = document.createElement('div');
colorsDiv.className = 'wdas-colors';
const cCol1 = document.createElement('div');
cCol1.className = 'wdas-color-col';
cCol1.innerHTML = `<div class="wdas-color-circle" style="background: rgb(${dominantColor.r}, ${dominantColor.g}, ${dominantColor.b})"></div><span>Your Image</span>`;
const cCol2 = document.createElement('div');
cCol2.className = 'wdas-color-col';
cCol2.innerHTML = `<div class="wdas-color-circle" style="background: rgb(${bestMovie.r}, ${bestMovie.g}, ${bestMovie.b})"></div><span>${bestMovie.title}</span>`;
colorsDiv.appendChild(cCol1);
colorsDiv.appendChild(cCol2);
statsDiv.appendChild(colorsDiv);
resPanel.appendChild(statsDiv);
// Action button
const aBtn = document.createElement('a');
aBtn.className = 'wdas-btn';
aBtn.target = '_blank';
aBtn.innerText = 'Search details on Google';
const searchQuery = `Walt Disney Animation Studios ${bestMovie.title} movie`;
aBtn.href = `https://www.google.com/search?q=${encodeURIComponent(searchQuery)}`;
resPanel.appendChild(aBtn);
wrapper.appendChild(resPanel);
return wrapper;
}Apply Changes
