Eduard Kuzmenko
4 years ago
8 changed files with 139 additions and 25 deletions
@ -0,0 +1,41 @@ |
|||||||
|
import { renderImageFromUrl } from "../components/misc"; |
||||||
|
|
||||||
|
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); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
@ -0,0 +1,31 @@ |
|||||||
|
export function rgbToHsl(r: number, g: number, b: number) { |
||||||
|
r /= 255, g /= 255, b /= 255; |
||||||
|
let max = Math.max(r, g, b), |
||||||
|
min = Math.min(r, g, b); |
||||||
|
let h, s, l = (max + min) / 2; |
||||||
|
|
||||||
|
if(max === min) { |
||||||
|
h = s = 0; // achromatic
|
||||||
|
} else { |
||||||
|
let d = max - min; |
||||||
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min); |
||||||
|
switch (max) { |
||||||
|
case r: |
||||||
|
h = (g - b) / d + (g < b ? 6 : 0); |
||||||
|
break; |
||||||
|
case g: |
||||||
|
h = (b - r) / d + 2; |
||||||
|
break; |
||||||
|
case b: |
||||||
|
h = (r - g) / d + 4; |
||||||
|
break; |
||||||
|
} |
||||||
|
h /= 6; |
||||||
|
} |
||||||
|
|
||||||
|
return ({ |
||||||
|
h: h, |
||||||
|
s: s, |
||||||
|
l: l, |
||||||
|
}); |
||||||
|
} |
Loading…
Reference in new issue