JSFiddle - React, Tailwind, and code Playground

HTML

<input type='file' id='inputFile'>
<table border=1><tr><td>
<span id='spanDisplayOrigFull'>OrigFull: <img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png></span>
    </td><td>
<span id='spanDisplayOrigIcon'>OrigIcon: <img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png width='16' height='16'></span>
    </td></tr><tr><td>
<span id='spanDisplayNewFull'>NewFull: </span>
    </td><td>
<span id='spanDisplayNewIcon'>NewIcon: </span>
    </td></tr></table>

JavaScript

$('#inputFile').bind('change', function()
{

var file = inputFile.files[0];

var reader = new FileReader();
reader.readAsDataURL(file);

reader.onload = function()
{

var imageUrlFull = reader.result;

var imageLocalFull = new Image();
imageLocalFull.src = imageUrlFull;
imageLocalFull.id = 'imageLocalFull';

imageLocalFull.onload = function()
{

var canvas = document.createElement('canvas');
canvas.width = 16; canvas.height = 16;

var context = canvas.getContext('2d');
context.drawImage(imageLocalFull, 0, 0, 16, 16);

var imageUrlIcon = canvas.toDataURL(file.type);

var imageLocalIcon = new Image();
imageLocalIcon.src = imageUrlIcon;
imageLocalIcon.id = 'imageLocalIcon';

imageLocalIcon.onload = function()
{

spanDisplayNewFull.appendChild(imageLocalFull);
spanDisplayNewIcon.appendChild(imageLocalIcon);

};

};

};

});