JSFiddle - React, Tailwind, and code Playground

HTML

<label>Image File:</label>
<br/>
<input type="file" id="imageLoader" name="imageLoader" />
<canvas id="imageCanvas"></canvas>
<textarea rows="10" cols="100" id="output"></textarea>

JavaScript

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var output = document.getElementById('output');


function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            var out = [];
            // convert image to grayscale and save in array
            for (var i = 0; i < imgData.data.length; i += 4) {
                var avg = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
                imgData.data[i] = avg;
                imgData.data[i + 1] = avg;
                imgData.data[i + 2] = avg;
                imgData.data[i + 3] = 255;
                out.push(avg/255);
            }
            ctx.putImageData(imgData, 0, 0);
            output.value = JSON.stringify(out);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}