Created
March 13, 2011 03:55
fetch images with xhr
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This was a big help in understanding why btoa() kept freaking out with:
Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
The best solution was this part from your example code:
for(i=0;i<response.length;i++){
binary += String.fromCharCode(response.charCodeAt(i) & 0xff);
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you!