Pasé todo el día tratando de eliminar los datos EXIF de las imágenes con React. Quiero hacer esto para tratar de resolver otro problema, cuando el usuario carga una imagen con datos XMP, aparentemente AWS WAF lo bloquea (no tuve problemas con otro tipo de datos, no probé todo aunque, pero usé una imagen con información de la cámara y blabla y funcionó bien. Además, borré los datos XMP de las imágenes problemáticas con un software, y WAF ya no lo bloqueó). Por lo tanto, quiero eliminar los datos XMP (autor, herramienta de creación, etc.) antes de enviarlos al servidor.
Estoy usando react-dropzone para cargar las imágenes, y hoy probé diferentes bibliotecas para lograr esto, sin éxito. Con exifr y exif-js puedo ver toda la información EXIF (incluido XMP) y específicamente los datos que causan el error en la carga, pero no encontré la manera de eliminar eso de la imagen. Por otro lado, usé piexifjs y funcionó bien para eliminar información, ¡pero no pude encontrar datos XMP! Solo gps, EXIF con configuración de cámara e imagen, además de un par de cosas que no son de mi interés. ¿Que puedo hacer? Puedo ver esta información con exif-js y exifr, pero solo puedo eliminar cosas con pixiefjs en las que no puedo ver datos xmp.
No proporciono código porque no es un error como tal, quiero recomendaciones de biblioteca o, si existe, una forma de configurar piexifjs para encontrar este tipo de datos. Exif-js y exifr son para leer, no para eliminar. Muchas gracias.
Aquí sería un ejemplo de código mío:
Con un derecho en la imagen, debería poder descargar la imagen y no debería haber datos EXIF incluidos. Pero no estoy seguro de si hay una mejor manera de hacerlo.
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>No estoy seguro de si no podría ser más simple, pero podría crear un lienzo con el tamaño de la imagen, cargar la imagen en él y escribir los datos de la imagen del lienzo en un nuevo archivo de imagen.