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
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SHEHANhasintha/c81e5d1eda7f3dd5aa2f7d9b19d383e7 to your computer and use it in GitHub Desktop.
Save SHEHANhasintha/c81e5d1eda7f3dd5aa2f7d9b19d383e7 to your computer and use it in GitHub Desktop.
Download ZIP
fetch images with xhr
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>Kitten!</title>
<meta charset="utf-8" />
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/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);
var snapshot = canvas.toDataURL("image/png");
var twinImage = document.getElementById('twinImg');
twinImage.src = snapshot;
}
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.send();
</script>
</head>
<body>
<canvas id="showImage" width="200" height="200"></canvas>
<img src="#" id="twinImg" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment