JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to Array</title>
</head>
<body>
    <h1>Image to Array with Convolution</h1>
    <canvas id="canvas"></canvas>
</body>
</html>

JavaScript

const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        // Image source URL
        const imageUrl = "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg";

        // Load the image
        const img = new Image();
        img.crossOrigin = "anonymous"; // For loading images from external sources
        img.src = imageUrl;

        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);

            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const pixelArray = imageData.data; // Pixel array in RGBA format
            console.log("Pixel Array (RGBA):", pixelArray);

            // Convert to a 2D grayscale array
            const width = imageData.width;
            const height = imageData.height;
            const pixelMatrix = convertToMatrix(pixelArray, width, height);
            console.log("2D Grayscale Pixel Matrix:", pixelMatrix);

            // Apply a sample kernel
            const kernel = [
                [0, -1, 0],
                [-1, 4, -1],
                [0, -1, 0],
            ];
            const filteredImage = applyKernel(pixelMatrix, kernel);
            console.log("Filtered Image Matrix:", filteredImage);

            // Display filtered output (optional, requires conversion back to canvas image)
            const filteredImageData = createImageDataFromMatrix(filteredImage, width, height);
            ctx.putImageData(filteredImageData, 0, 0);
        };

        // Function to convert RGBA pixel array to a 2D grayscale matrix
        function convertToMatrix(pixelArray, width, height) {
            const matrix = [];
            for (let y = 0; y < height; y++) {
                const row = [];
                for (let x = 0; x < width; x++) {
                    const index = (y *...