I implemented an EXIF button in a gallery to read EXIF data using the well-known exif.js
script from here. My image loads into a img0
img node, and then I use:
function exif() {
EXIF.getData(img0, function() {
var model = EXIF.getTag(this, "Model");
var datetime = EXIF.getTag(this, "DateTimeOriginal");
var fnumber = EXIF.getTag(this, "FNumber");
.... <print this.src, and the exif output>
});
}
When I click a thumbnail, the large image appears fullscreen (in a modal
, with the img0
img node on it with the corresponding img.src
), with an EXIF button (top, second from left), which executes the above function exif() when onclick
. It works fine. Then I close the image by clicking on it, click on another thumbnail, and a second large image opens (with an updated img.src
). When I click the EXIF button again, I can see a different img.src, yet the same EXIF as the first one (same gps, same time, etc). Somehow exif.js keeps the old img.src, and does not update it. You can check the gallery working here.
How do I force exif.js to see the new img.src file? Is it using the img in the cache? Can I ask exif.js to read the file instead of the img
node? This is not supported in the documentation.
EDIT: I read the exif.js code, and there is a function that checks if the img node has exif:
function imageHasData(img) {return !!(img.exifdata); }
This function is called just before getImageData
:
if (!imageHasData(img)) { getImageData(img, callback); } else...
Therefore, for some reason, imageHasData(img)
returns false
the first time and true
the second.