JSFiddle - React, Tailwind, and code Playground

by janjhnsn

HTML

<h1>Udvikleren julekonkurrence</h1>
X: <input id="x" type="text"/><br/>
Y: <input id="y" type="text"/><br/>
<input type="file" id="input"/><br/>
<br/><br/>

Answer:<br/>
<pre id="answer"></pre>

Output:<br/>
<pre id="output"></pre>

JavaScript

var input = document.getElementById('input'),
    x = $('#x'),
    y = $('#y');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
    var canvas = $('<canvas/>')[0];
    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    
    img.onload = function() {
        console.log(img.width, img.height);
        canvas.width = img.width;
        canvas.height = img.height;
        
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
        
        var pixelData = canvas.getContext('2d').getImageData(x.val(), y.val(), 1, 1).data;
        $('#output').html('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3] + '<br><br>');
        
        canvas.getContext('2d').fillStyle = "rgba(255,255,255,255)";
        canvas.getContext('2d').fillRect( x.val(), y.val(), 1, 1 );
        
        $('#output').append(canvas);
        
        //10000*rødPixelværdi+1000*grønPixelværdi+100*blåPixelværdi.
        $('#answer').html((10000 * pixelData[0]) + (1000 * pixelData[1]) + (100 * pixelData[2]));
    }
}