Delete exif data (xmp) from image in React

user_16495298 0
Viewed 147

I have spent my entire day trying to delete EXIF data from images with React. I want to do this for try to solve another problem, when user uploads an image with XMP data, apparently AWS WAF blocks it (I didn't have problems with another kind of data, I dind't tried everything tho, but I used an image with camera information and blabla and it worked just fine. Plus, I deleted XMP data from problematic images with a software, and WAF didn't blocked it anymore). So, I want to delete XMP data (author, creator tool, etc.) before send it to server.

I'm using react-dropzone for upload the images, and today I tried different libraries for achieve this, without success. With exifr and exif-js I can see all the EXIF information (including XMP) and specificcaly the data that is causing the error in the upload, but I didn't find a way to remove that from the picture. On the other hand, I used piexifjs and worked fine for delete information, but I couldn't find XMP data!! Just gps, EXIF with camera and picture settings, plus a couple of thing not of my interest. What can I do? I'm able to see this information with exif-js and exifr, but I just can delete things with pixiefjs in which I can't see xmp data.

I do not provide code because it is not an error as such, I want library recommendations or, if exists, a way to configure piexifjs for find this kind of data. exif-js and exifr are for reading, not for removing. Thanks a lot.

reactjs image-processing file-upload image javascript
2 Answers

Here would be a sample code of mine:

With a right on the image you should be able to download the image and there should be no exif data included. But I am unsure if there is a better way to do that.

document.getElementById('upload').onchange = function() {
  const img = new Image();
  img.src = URL.createObjectURL(this.files[0]);
  img.onload = function() {
    //canvas
    const canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0,0);
    //image in html
    newImg = document.getElementById('img');
    newImg.src = canvas.toDataURL();
    newImg.style.width = this.width;
    newImg.style.height = this.height;
  };
  img.onerror = function() {console.error("The file is not an image")};
};
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="file" id="upload">
        <img id="img"></img>
    <script src="script.js"></script>
  </body>
</html>

user_196044850

I'm unsure if it couldn't be simpler, but you could create a canvas with the size of the image, load the image into it, and write the image data from the canvas to a new image file.

user_196044850
Related