Get binary data / EXIF from image on page
I need to access EXIF
data in images already loaded on a page. Let's say from a browser extension. AFAIU, there are several approaches to JavaScript to accomplish the task:
- use JavaScript-Load-Image ;
- use management Library EXIF DATA Nihologic ;
- draw an image on canvas.
The first two approaches may involve local files or require an additional (unnecessary in this case) request to the server to retrieve the binary data. The latter probably works:
var canvas = document.createElement("canvas");
canvas.width = oImg.width;
canvas.height = oImg.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(oImg, 0, 0);
// Get the data-URL formatted image
var dataURL = window.atob(canvas.toDataURL("image/jpeg", 1.0).split(',')[1]);
but the resulting blob contains data EXIF DATA ( 0xE1
), it seems that after the drawing on the canvas he gives instead JFIF (marker 0xE0
).
So my question is, is it possible to access the binary data of an already loaded image on the page?
Please note: there are similar questions already on SO, but no one answers the question of how not to reload the image and access EXIF data.
I understand that I could save the image locally, say in LocalStorage, and then use the library mentioned above, but also looks like overkill.
source to share
Is it possible to access the binary data of an already loaded image on the page?
No, this is unfortunately not possible, not from the raw binaries used for the image. The original binary data is discarded after image processing.
The image upload process is a completely separate process and does not contain any canvas at all - the canvas is innocent here! :-)
The browser loads the image like this what happens internally, without JavaScript or DOM access (not necessarily in this order for all steps):
- Server connection
- Loads data to determine the file type
- If supported file type loads all data
- Retrieves ICC and gamma definitions if supported
- Extract orientation / rotation EXIF if present
- Decompresses / decodes a file into a bitmap
- Applies gamma and ICC correction if available and supported.
- Updates an object
Image
with an internal reference to the bitmap - Event broadcast
load
- Calls a challenge
onload
in any
When you receive the object Image
, everything has been prepared and installed, the rest of the file and the information extracted from it are discarded, including. EXIF data (with the exception of EXIF orientation in browsers that support it, however, for internal use only, not readable from JavaScript and only used for the DOM - although since it might break the intended layout it is usually ignored). I believe most browsers can read this flag, but AFAIK only uses Safari mobile (I could be wrong here, but that doesn't change the essence of the answer).
All that remains is the bitmap with RGBA information. You can now embed this in the DOM or draw it to the canvas, but the meta information has already been removed before doing so. When you extract the data-uri from the canvas (like png or jpeg, it doesn't really matter) the extraction is based solely on the bitmap of the canvas and not on the original image used on it (images are just one source of graphics anyway , in addition to videos and tracks).
Since there is currently no official API to access EXIF data from an Image object, the only way is to read the EXIF data, to read the image as a binary stream into a binary file with a buffer, and extract the data manually and low-level using JavaScript. This is why the library list should do it this way. However, the cache can be saved.
This is probably not what you were hoping for, but we have no other option that does this, or does it on the server side (e.g. load times). Then you can provide a mechanism to download the cached EXIF data as a JSON object or something similar.
source to share