Back to packages list
Vals using jimp
Description from the NPM package:
An image processing library written entirely in JavaScript (i.e. zero external or native dependencies)
Get common or "dominant" color from an image given a source URL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import Jimp from "npm:jimp";
const IMG_URL = "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg";
const PERCENT_COVERAGE = 10; // lower is faster, but higher is more accurate
function getPixelIndex(numToRound) {
// Each pixel is 4 units long: r,g,b,a
const remainder = numToRound % 4;
if (remainder == 0) return numToRound;
return numToRound + 4 - remainder;
}
export async function getColor(src: string = IMG_URL): Promise<string> {
return Jimp.read(src)
.then((image) => {
const store = {};
const pixelCount = image.bitmap.width * image.bitmap.height;
const coverage = pixelCount * PERCENT_COVERAGE / 100;
const data = image.bitmap.data;
for (let i = 0; i < coverage; ++i) {
const x = getPixelIndex(Math.floor(Math.random() * (pixelCount - 1)));
const key = `${data[x]},${data[x + 1]},${data[x + 2]}`;
const val = store[key];
store[key] = val ? val + 1 : 1;
}
const rgb = Object.keys(store).reduce((a, b) => store[a] > store[b] ? a : b);
return `rgb(${rgb})`;
});
}
console.log(await getColor()); // TODO remove
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { blob } from "https://esm.town/v/std/blob?v=3";
import Jimp from "npm:jimp";
export async function download(req: Request): Promise<Response> {
// Return the picture as a response
const searchParams = new URL(req.url).searchParams;
let paramsobj = Object.fromEntries(searchParams.entries());
const stored = await blob.get(paramsobj.url);
return new Response(stored.body, {
headers: {
"Content-Type": Jimp.MIME_PNG,
},
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { tidbytCheck } from "https://esm.town/v/andreterron/tidbytCheck";
import { tidbytCircle } from "https://esm.town/v/andreterron/tidbytCircle";
import { tidbytSkipped } from "https://esm.town/v/andreterron/tidbytSkipped";
import { tidbytX } from "https://esm.town/v/andreterron/tidbytX";
import { workoutDays as workoutDays2 } from "https://esm.town/v/andreterron/workoutDays";
import { WorkoutIcon } from "https://esm.town/v/andreterron/workoutIcons";
import Jimp from "npm:jimp";
export async function createTidbytWorkoutsImage(icons: WorkoutIcon[]) {
const headerUrl = "https://art.pixilart.com/sr2c714c74a22aws3.png";
const weekdaysUrl = "https://art.pixilart.com/sr22f1df42b42aws3.png";
const img = await new Jimp(64, 32, 0x000000ff);
const header = await Jimp.read(headerUrl);
const weekdays = await Jimp.read(weekdaysUrl);
await img
.composite(
await header
.resize(64, 32),
0,
0,
)
.composite(
await weekdays
.resize(64, 32),
0,
0,
{
mode: Jimp.BLEND_SOURCE_OVER,
opacitySource: 0.5,
opacityDest: 1,
},
);
const checked = await tidbytCheck({
size: 7,
});
const unchecked = await tidbytCircle({
size: 7,
border: 0xffffff80,
});
const skipped = await tidbytSkipped({
size: 7,
});
const failed = await tidbytX({
size: 7,
});
const today = await tidbytCircle({
size: 7,
border: 0xffffffff,
});
function selectIcon(icon: WorkoutIcon) {
switch (icon) {
case "done":
return checked;
case "failed":
return failed;
case "skipped":
return skipped;
case "today":
return today;
case "future":
return unchecked;
}
}
for (let i = 0; i < 7; i++) {
await img.composite(
selectIcon(icons[i]),
1 + i * 9,
31 - 5 - 7,
);
}
return await img
.resize(64, 32);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export async function tidbytCircle({ size = 7, fill, border }: {
size?: number;
fill?: number;
border?: number;
}) {
const { default: Jimp } = await import("npm:jimp");
const img = await new Jimp(size, size);
for (const { x, y, idx, image } of img.scanIterator(0, 0, size, size)) {
const dx = x - size / 2 + 0.5;
const dy = y - size / 2 + 0.5;
const d = Math.sqrt(dx * dx + dy * dy);
if (d <= size / 2) {
if (typeof border === "number" && d > (size / 2 - 1)) {
image.setPixelColor(border, x, y);
}
else if (typeof fill === "number") {
image.setPixelColor(fill, x, y);
}
}
}
return img;
}