Skip to content

Instantly share code, notes, and snippets.

@lucasferreira
Created August 10, 2011 01:21
Show Gist options
  • Save lucasferreira/1135780 to your computer and use it in GitHub Desktop.
Save lucasferreira/1135780 to your computer and use it in GitHub Desktop.
Get image data in Javascript
//from: http://stackoverflow.com/questions/934012/get-image-data-in-javascript
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
@dportabella
Copy link

I get this error: Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
Any idea?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment