unpack error after adding and then removing exif info

[vigyanhoon]

I had to add/update some exif information to image and then remove all information later on. Using this library, I was able to add exif info to the image but wasn't being able to remove after adding, due to unpack: mismatch error on line 801. This issue was found for some images.

My change:
Line no 41 to 45 of piexif.js.

You check occurrence of "ÿá" character at segment index 1 and then at index 2. If found you remove that segment. However in my case, this character was occurring twice at two different segments which was causing issue.

I have written a loop to check for all such segments starting with "ÿá", and removed that segment if found. Is this approach correct?

e.g.

        var arr = []
        for (var i = 0; i < segments.length; i++){
            var item = segments[i];

            if (item.slice(0, 2) != "\xff\xe1"){
                arr.push(item)
            }
        }
        segments = arr;

This resolves error on my side for all images. But I am not sure if this is how you would have done it!

Code in html:

function handleFileSelect(evt) {
    var file = evt.target.files[0];
    var reader = new FileReader();
    reader.onloadend = function(e){
        var originalData = e.target.result;
        printExif(originalData);
        originalData = updateExif(originalData)
        originalData = removeExif(originalData);
        originalData = updateExif(originalData)
        originalData = removeExif(originalData)
    };
    reader.readAsDataURL(file);
}


function updateExif(originalData){
        var allExifData = piexif.load(originalData);
        allExifData['0th'][271] = "sanjay";
        allExifData['0th'][272] = "pandey";
        allExifData['GPS'][2] = [[1,1], [2,1], [3,1]];
        allExifData['GPS'][4] = [[4,1], [5,1], [6,1]];

        var exifBytes = piexif.dump(allExifData);

        var finalData = piexif.insert(exifBytes, originalData);

        printExif(finalData);

        return finalData
}

function removeExif(originalData){
  var finalData = piexif.remove(originalData);
  printExif(finalData);

  return finalData
}

[hMatoba]

I thought that "\xff\xe1" is enough information to conclude a segment is exif or not, but it's not enough. Adobe XMP also have "\xff\xe1". I'll fix it this weekend.

[hMatoba]

Fixed.

[vigyanhoon]

Hi,

Thanks for the fix.

Although it fixed the unpack error. It doesn't remove the exif info after inserting. But it removes it if we call remove the second time. I think you must update your removal function appropriately to cater for this.

Following is the debugging info before removal, something is fishy. See the duplicate segments.

Please use below html to reproduce the problem. I am first inserting exif to original image and then removing. This removing doesn't work. But removing again works.

function handleFileSelect(evt) {

    var file = evt.target.files[0];
    var reader = new FileReader();
    reader.onloadend = function(e){
        onSuccess(e.target.result);
    };
    reader.readAsDataURL(file);
}

function onSuccess(originalData) {

  printExif(originalData);

  originalData = updateExif(originalData);
  originalData = removeExif(originalData);
  originalData = updateExif(originalData);
  originalData = removeExif(originalData);
}

function onFail(message) {
    alert('Failed because: ' + message);
}

function updateExif(data){

  var allExifData = piexif.load(data);
  allExifData['0th'][271] = "sanjay pandey";
  allExifData['GPS'][2] = [[1,1], [2,1], [3,1]];
  allExifData['GPS'][4] = [[4,1], [5,1], [6,1]];

  var exifBytes = piexif.dump(allExifData);

  var insertedData = piexif.insert(exifBytes, data);

  printExif(insertedData);

  return insertedData
}

function removeExif(data){
  var removedData = piexif.remove(data);
  printExif(removedData);

  return removedData
}

document.getElementById('f').addEventListener('change', handleFileSelect, false);

[hMatoba]

Fixed.

[vigyanhoon]

Awesome! Thanks.

[hMatoba]

Thank you for letting me know.