Possible Duplicates:
Get image data in Javascript?
How to encode image data within an HTML file?
Is there any way to convert an image to binary data in javascript and vice versa.
Add a comment
|
1 Answer
I think Get image data in JavaScript? answers your question:
// Code taken from MatthewCrumley (https://stackoverflow.com/a/934925/298479)
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,/, "");
}
Pass the img tag to this function. It will return the image in base64 encoding. It will be re-encoded though. So you cannot access the original image data.
6 Comments
Hacknightly
Beat me to it, but this is how I did it as well. +1
undefined
I turned this into a bookmarklet here: jsfiddle.net/bgmort/m26yr You open the image you want in its own tab, then run this, and it inserts a textarea on the screen with the data url.
Benny Neugebauer
Instead of the "dataURL.replace" you can do "dataURL.split(',')[1]" which will also work for other formats than "png" or "jpg". :)
Chris - Haddox Technologies
This does a base64 encoding, not straight binary as you would need for a file
WebWanderer
Umm.. how about a way to grab the base64 image-data without the use of canvas? Possible?
|