tweb-i2p/src/helpers/averageColor.ts

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

import renderImageFromUrl from "./dom/renderImageFromUrl";

export const averageColor = (imageUrl: string): Promise<Uint8ClampedArray> => {
  const img = document.createElement('img');
  return new Promise<Uint8ClampedArray>((resolve) => {
    renderImageFromUrl(img, imageUrl, () => {
      const canvas = document.createElement('canvas');
      const ratio = img.naturalWidth / img.naturalHeight;
      const DIMENSIONS = 50;
      if(ratio === 1) {
        canvas.width = DIMENSIONS;
        canvas.height = canvas.width / ratio;
      } else if(ratio > 1) {
        canvas.height = DIMENSIONS;
        canvas.width = canvas.height / ratio;
      } else {
        canvas.width = canvas.height = DIMENSIONS;
      }
      
      const context = canvas.getContext('2d');
      context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);

      const pixel = new Array(4).fill(0);
      const pixels = context.getImageData(0, 0, canvas.width, canvas.height).data;
      for(let i = 0; i < pixels.length; i += 4) {
        pixel[0] += pixels[i];
        pixel[1] += pixels[i + 1];
        pixel[2] += pixels[i + 2];
        pixel[3] += pixels[i + 3];
      }

      const pixelsLength = pixels.length / 4;
      const outPixel = new Uint8ClampedArray(4);
      outPixel[0] = pixel[0] / pixelsLength;
      outPixel[1] = pixel[1] / pixelsLength;
      outPixel[2] = pixel[2] / pixelsLength;
      outPixel[3] = pixel[3] / pixelsLength;
      resolve(outPixel);
    });
  });
};