Eduard Kuzmenko
4 years ago
8 changed files with 139 additions and 25 deletions
@ -0,0 +1,41 @@
@@ -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 @@
@@ -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