-
Notifications
You must be signed in to change notification settings - Fork 1
/
extractPixelData.js
72 lines (64 loc) · 1.68 KB
/
extractPixelData.js
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
import { html } from "lit-html";
const config = {
inports: {
dataurl: {
type: "dataurl",
value: null,
},
},
outports: {
pixelData: {
type: "array",
value: null,
},
},
state: {},
ui: {
displayName: "Pixel Data",
width: 200,
height: 200,
resize: "both",
},
};
function extractPixelData(inports, outports, state) {
function makePixelArray(ctx, width, height) {
let pixels = Array(height)
.fill()
.map(() => Array(width).fill(0));
for (let row = 0; row < height; row++) {
for (let col = 0; col < width; col++) {
const imageData = ctx.getImageData(col, row, 1, 1);
let [r, g, b, a] = imageData.data;
pixels[row][col] = 0.299 * r + 0.587 * g + 0.114 * b; // Grayscale
}
}
outports.pixelData.value = pixels;
}
function inportsUpdated() {
const myCanvas = document.createElement("canvas");
const ctx = myCanvas.getContext("2d", { willReadFrequently: true });
const img = new Image();
img.onload = function () {
// gotta size the canvas to the image or else making the pixel array won't work
myCanvas.width = img.width;
myCanvas.height = img.height;
ctx.drawImage(img, 0, 0);
makePixelArray(ctx, img.width, img.height);
};
img.src = inports.dataurl.value;
}
function render() {
return html`<style>
img {
height: 100%;
width: 100%;
object-fit: contain;
display: block;
image-rendering: pixelated;
}
</style>
<img src=${inports.dataurl.value} />`;
}
return { render, inportsUpdated };
}
export default { config, tool: extractPixelData };