HTML Canvas Load data URL from server

Description

HTML Canvas Load data URL from server

View in separate window 

<!DOCTYPE HTML> 
<html>
    <head>
        <script>
function loadCanvas(dataURL){/*from   w w w  .  j  a v  a 2  s  .c  om*/
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    
    // load image from data url
    var imageObj = new Image();
    imageObj.onload = function(){
        context.drawImage(this, 0, 0);
    };
    
    imageObj.src = dataURL;
}

window.onload = function(){
    // make ajax call to get image data url
    var request = new XMLHttpRequest();
    request.open("GET", "dataURL.txt", true);
    request.onreadystatechange = function(){
        if (request.readyState == 4) { 
            if (request.status == 200) { // successful response
                loadCanvas(request.responseText);
            }
        }
    };
    request.send(null);
};
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>



PreviousNext

Related