image test

2024-10-01 17:55:58 +02:00 · 2024-10-01 17:55:58 +02:00 · 134d182d76
commit 134d182d76
parent 7c06d07bb0
3 changed files with 117 additions and 0 deletions
--- a/image.html
+++ b/image.html
@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
+    <canvas id="canvas" width="800" height="600"></canvas>
+</body>
+<script type="module" src="image.js"></script>
+</html>
--- a/image.js
+++ b/image.js
@ -0,0 +1,105 @@
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+const img = new Image();
+img.crossOrigin = "anonymous";
+img.src = "/rose.png";
+img.onload = () => {
+    /*canvas.offscreenCanvas = document.createElement("canvas");
+    canvas.offscreenCanvas.height = img.height;
+    canvas.offscreenCanvas.width = img.width;
+    canvas.offscreenCanvas.getContext("2d").drawImage(img, 0, 0);
+    */
+    ctx.drawImage(img, 0, 0);
+};
+
+function invert(imgData) {
+    const data = imgData.data;
+    for (let i = 0; i < data.length; i += 4) {
+        //const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+        data[i] = 255 - data[i];
+        data[i+1] = 255 - data[i+1];
+        data[i+2] = 255 - data[i+2];
+    }
+}
+
+function greyscale(imgData) {
+    const data = imgData.data;
+    for (let i = 0; i < data.length; i += 4) {
+        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+        data[i] = avg;
+        data[i+1] = avg;
+        data[i+2] = avg;
+    }
+}
+
+function clamp(x, min, max) {
+    return Math.min(Math.max(x, min), max);
+}
+
+function convolve(imageData, kernel) {
+    const width = imageData.width;
+    const height = imageData.height;
+    const data = imageData.data;
+    const out = new ImageData(width, height);
+    const kernelSize = Math.sqrt(kernel.length); // Assuming kernel is square
+    const halfKernel = Math.floor(kernelSize / 2);
+
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            let r = 0, g = 0, b = 0;
+
+            for (let ky = -halfKernel; ky <= halfKernel; ky++) {
+                for (let kx = -halfKernel; kx <= halfKernel; kx++) {
+                    const px = x + kx;
+                    const py = y + ky;
+                    if (px >= 0 && px < width && py >= 0 && py < height) {
+                        const idx = (py * width + px) * 4;
+                        const kernelValue = kernel[(ky + halfKernel) * kernelSize + (kx + halfKernel)];
+                        r += data[idx] * kernelValue;
+                        g += data[idx + 1] * kernelValue;
+                        b += data[idx + 2] * kernelValue;
+                    }
+                }
+            }
+
+            out.data[(y*width+x)*4] = r;
+            out.data[(y*width+x)*4 + 1] = g;
+            out.data[(y*width+x)*4 + 2] = b;
+            out.data[(y*width+x)*4 + 3] = data[(y*width+x) * 4 + 3]; // preserve original alpha
+        }
+    }
+
+    return out;
+}
+
+// multiply two 3x3 matrices
+function matMult(a, b) {
+    const result = new Array(9).fill(0);
+    for (let j = 0; j < 3; ++j){ 
+        for (let i = 0; i < 3; ++i) {
+            for (let k = 0; k < 3; ++k) {
+                result[j*3+i] += a[j*3+k] * b[k*3+i];
+            }
+        }
+    }
+    return result;
+}
+ 
+canvas.onclick = () => {
+    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    ctx.clearRect(0, 0, canvas.height, canvas.width);
+    //invert(imgData);
+    //greyscale(imgData);
+    //const identityKernel = [0, 0, 0, 0, 1, 0, 0, 0, 0];
+    const gaussianKernel = [0.075, 0.124, 0.075, 0.124, 0.204, 0.124, 0.075, 0.124, 0.075]
+    const convolved = convolve(imgData, gaussianKernel);
+    ctx.putImageData(convolved, 0, 0);
+};
+
+
+const matrixA = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+const matrixB = [9, 8, 7, 6, 5, 4, 3, 2, 1];
+
+const result = matMult(matrixA, matrixB);
+console.log(result);
--- a/rose.png
+++ b/rose.png