JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<!DOCTYPE html>  
  
<html>  
    <head>  
        <title>Load Image Into 2D Array with Canvas/JS</title>  
        <meta charset="utf-8">  
    </head>  
  
    <body>  
        <canvas id="myCanvas" width="737" height="411"> </canvas>  
        
    </body>  
</html>

JavaScript

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

var image = new Image();  
image.src = "http://www.vaughnroyko.com/1.1/map.png";  
image.onload = function() {
    
    ctx.drawImage(image, 0, 0); 
  
    var imageData = ctx.getImageData(0, 0, 737, 411);  
    var pixels = imageData.data; 

    var tile = [];
    for (var x = 0; x <= 737; x++) {  
        tile[x] = tile[x] || {};
        for (var y = 0; y <= 411; y++) {      
            tile[x][y] = 255-pixels[x*4] + '' + 255-pixels[x*4+1] + '' + 255-pixels[x*4+2];
        }
    }     
    
};