Skip to content

Instantly share code, notes, and snippets.

@mjj2000

mjj2000/cors.html

Created October 25, 2013 09:18
Show Gist options
  • Save mjj2000/7151937 to your computer and use it in GitHub Desktop.
Save mjj2000/7151937 to your computer and use it in GitHub Desktop.
Download ZIP
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!
Raw
cors.html
<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