Skip to content

Instantly share code, notes, and snippets.

@SHEHANhasintha

SHEHANhasintha/gist:c81e5d1eda7f3dd5aa2f7d9b19d383e7

Forked from graylikeme/gist:867848
Created May 6, 2019 05:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SHEHANhasintha/c81e5d1eda7f3dd5aa2f7d9b19d383e7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SHEHANhasintha/c81e5d1eda7f3dd5aa2f7d9b19d383e7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @graylikeme graylikeme revised this gist Mar 13, 2011. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    <script type="text/javascript">
    var xhr = new XMLHttpRequest();

    xhr.open('GET', '../images/kitten.jpg', true);
    xhr.open('GET', 'http://example.com/images/kitten.jpg', true);

    xhr.onload = function(){
    var img = new Image();
    @@ -22,6 +22,10 @@
    var context = canvas.getContext('2d');

    context.drawImage(img,0,0);
    var snapshot = canvas.toDataURL("image/png");
    var twinImage = document.getElementById('twinImg');
    twinImage.src = snapshot;

    }

    xhr.overrideMimeType('text/plain; charset=x-user-defined');
    @@ -30,5 +34,6 @@
    </head>
    <body>
    <canvas id="showImage" width="200" height="200"></canvas>
    <img src="#" id="twinImg" />
    </body>
    </html>
  2. @invalid-email-address Anonymous created this gist Mar 13, 2011.
    34 changes: 34 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Kitten!</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
    var xhr = new XMLHttpRequest();

    xhr.open('GET', '../images/kitten.jpg', true);

    xhr.onload = function(){
    var img = new Image();
    var response = xhr.responseText;
    var binary = ""

    for(i=0;i<response.length;i++){
    binary += String.fromCharCode(response.charCodeAt(i) & 0xff);
    }

    img.src = 'data:image/jpeg;base64,' + btoa(binary);
    var canvas = document.getElementById('showImage');
    var context = canvas.getContext('2d');

    context.drawImage(img,0,0);
    }

    xhr.overrideMimeType('text/plain; charset=x-user-defined');
    xhr.send();
    </script>
    </head>
    <body>
    <canvas id="showImage" width="200" height="200"></canvas>
    </body>
    </html>