get prominent color from image in javascript

index.tsx
// Load the image
const img = new Image();
img.src = 'my-image.jpg';

// Create a canvas element and draw the image on it
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);

  // Get the pixel data from the canvas
  const pixelData = ctx.getImageData(0, 0, img.width, img.height).data;

  // Analyze the pixel data to find the most common color
  const colorCount = {};
  for (let i = 0; i < pixelData.length; i += 4) {
    const r = pixelData[i];
    const g = pixelData[i + 1];
    const b = pixelData[i + 2];
    const color = `rgb(${r},${g},${b})`;
    colorCount[color] = (colorCount[color] || 0) + 1;
  }
  
  // Choose the most prominent color
  const colors = Object.keys(colorCount);
  const maxCount = Math.max(...Object.values(colorCount));
  const prominentColors = colors.filter(color => colorCount[color] === maxCount);
  
  console.log('Prominent colors:', prominentColors);
};
1063 chars
33 lines