asl_screenshot

creating image from uncompressed raw PNG data

HTML

<div style="background: aqua; width: 500px; height: 660px;">

		<canvas style="width: 480px; height: 640px;" id="sim">
		</canvas>
</div>

JavaScript

var ctx;
var width = 480;
var height = 640;

(function start() {
    ctx = document.getElementById("sim").getContext("2d");
    loadFromFile();
})();

function loadImage(data) {
    var image = new Image();
    image.onload = function() {
        //this part never executes
        ctx.drawImage(image, 0, 0);
        alert("images loaded!");
    }
    
    image.src = "data:image/png;base64," + data;
}

function loadFromFile() {
    //I am storing this file data locally 
    
    var file = "https://app.box.com/s/e19ww51fd37h4sy8getjnag31ud6tpp9";
    
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true);
    
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                var data = rawFile.responseText;
                alert("data loaded: " + data.length);
                
                loadImage(data);
            }
        }
    }
    rawFile.send(null);
}