Created
October 25, 2013 09:18
-
-
Save mjj2000/7151937 to your computer and use it in GitHub Desktop.
Load external image with CORS to convert image to DataURI and draw content into HTML5 canvas.
Note: Image element should be created by javascript. Loading image with <img> tag does not works!
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
| <html> | |
| <body> | |
| Load external CORS image into the canvas below:<br> | |
| <canvas id="c"></canvas><br> | |
| Convert canvas to DataUri then set as source of the image below:<br> | |
| <img id="img" /> <br> | |
| <div id="results"></div> | |
| <script> | |
| var c = document.getElementById('c'); | |
| var ctx = c.getContext('2d'); | |
| var img = new Image(); | |
| img.crossOrigin = ''; | |
| img.src = "https://graph.facebook.com/zuck/picture?type=large"; | |
| img.onload = function () { | |
| var img = this; | |
| try { | |
| var start = new Date().getTime(); | |
| c.width = img.width; | |
| c.height = img.height; | |
| ctx.drawImage(img, 0, 0, img.width, img.height); | |
| var dataUri = c.toDataURL(); | |
| document.getElementById('img').src = dataUri; | |
| document.getElementById("results").innerHTML = "<span style='color:Green;'>" + | |
| "Success: Your browser supports CORS for cross domain images in Canvas with DataUri:<br>" + | |
| "<input value='" + dataUri + "' style='width:100%'/'>" + | |
| "</span>"; | |
| } catch (ex) { | |
| document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment