zygiss22/color-palette-extraction

Create a color palette using median cut with Javascript

Create a color palette from an image

Using median cut algorithm & color quantization to obtain a color palette with complementary colors in plain Javascript.

Demo the app here.

This repository was created as an example for this article

How to run

Simply clone and open the HTML file in the browser, that's it.

color-palette-extraction's Issues

Don't process the full resolution image, instead scale it down first.

This improves processing speed and the result shouldn't be too far off.

const main = () => {
  const imgFile = document.getElementById("imgfile");
  const image = new Image();
  const file = imgFile.files[0];
  const fileReader = new FileReader();

  // Whenever file & image is loaded procced to extract the information from the image
  fileReader.onload = () => {
    image.onload = () => {
      // Set the canvas size to be the same as of the uploaded image
      const canvas  = document.getElementById("canvas");
      const dw      = 64;
      const dh      = 64;
      canvas.width  = dw;
      canvas.height = dh;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, dw, dh);

      /**
       * getImageData returns an array full of RGBA values
       * each pixel consists of four values: the red value of the colour, the green, the blue and the alpha
       * (transparency). For array value consistency reasons,
       * the alpha is not from 0 to 1 like it is in the RGBA of CSS, but from 0 to 255.
       */
      const imageData = ctx.getImageData(0, 0, dw, dh);

      // Convert the image data to RGB values so its much simpler
      const rgbArray = buildRgb(imageData.data);

      /**
       * Color quantization
       * A process that reduces the number of colors used in an image
       * while trying to visually maintin the original image as much as possible
       */
      const quantColors = quantization(rgbArray, 0);

      // Create the HTML structure to show the color palette
      buildPalette(quantColors);
    };
    image.src = fileReader.result;
  };
  fileReader.readAsDataURL(file);
};

Why does this not extract the color white?

Trying to get colors from this image. TY

Could you add an appropriate license (ideally MIT License) to the repo?