-
Notifications
You must be signed in to change notification settings - Fork 5
/
icon.html
67 lines (60 loc) 路 2.13 KB
/
icon.html
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
<!DOCTYPE html>
<meta charset="utf8" />
<body>
<canvas id="out"></canvas>
<script>
const sizes = [16, 32, 64, 128, 256, 512, 1024];
sizes.forEach((size) => {
out.width = size;
out.height = size;
const ctx = out.getContext('2d');
ctx.font = `${size === 16 ? 10 : size}px sans-serif`;
const text = '馃檭';
const metrics = ctx.measureText(text);
const middle =
(metrics.actualBoundingBoxAscent +
metrics.actualBoundingBoxDescent) /
2;
const offset = middle - size / 2;
ctx.fillText(
text,
size / 2 - metrics.width / 2,
metrics.actualBoundingBoxAscent - offset,
);
ctx.putImageData(desaturate(ctx), 0, 0);
const img = document.createElement('img');
img.src = out.toDataURL();
img.style.outline = '1px solid #ccc';
img.style.margin = '4px';
document.body.append(img);
});
function rgbToGrayscale(r, g, b) {
// Returns single monochrome figure:
return 0.2125 * r + 0.7154 * g + 0.0721 * b;
}
function desaturate(ctx) {
var imgData = ctx.getImageData(
0,
0,
ctx.canvas.width,
ctx.canvas.height,
);
for (y = 0; y < ctx.canvas.height; y++) {
for (x = 0; x < ctx.canvas.width; x++) {
i = (y * ctx.canvas.width + x) * 4;
// Apply Monochrome level across all channels:
imgData.data[i] =
imgData.data[i + 1] =
imgData.data[i + 2] =
rgbToGrayscale(
imgData.data[i],
imgData.data[i + 1],
imgData.data[i + 2],
);
}
}
return imgData;
}
out.style.display = 'none';
</script>
</body>