tokono.ma
1// 🚀
2
3
4export function init(app) {
5 app.ports.pickAverageBackgroundColor.subscribe((src: string) => {
6 const avgColor = pickAverageBackgroundColor(src)
7 if (avgColor) app.ports.setAverageBackgroundColor.send(avgColor)
8 })
9}
10
11
12
13// 🛠️
14
15
16function averageColorOfImage(img: HTMLImageElement): { r: number, g: number, b: number } | null {
17 const canvas = document.createElement("canvas")
18 const ctx = canvas.getContext("2d")
19 canvas.width = img.naturalWidth
20 canvas.height = img.naturalHeight
21
22 if (!ctx) return null
23
24 ctx.drawImage(img, 0, 0)
25
26 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
27 const color = { r: 0, g: 0, b: 0 }
28
29 for (let i = 0, l = imageData.data.length; i < l; i += 4) {
30 color.r += imageData.data[i]
31 color.g += imageData.data[i + 1]
32 color.b += imageData.data[i + 2]
33 }
34
35 color.r = Math.floor(color.r / (imageData.data.length / 4))
36 color.g = Math.floor(color.g / (imageData.data.length / 4))
37 color.b = Math.floor(color.b / (imageData.data.length / 4))
38
39 return color
40}
41
42
43function pickAverageBackgroundColor(src: string): { r: number, g: number, b: number } | null {
44 const img = document.querySelector(`img[src$="${src}"]`)
45 return img ? averageColorOfImage(img as HTMLImageElement) : null
46}