How to remove EXIF data from image using javascript?

Question

I read in a file from an HTML file input. For iOS I can take a picture from the camera. The problem is that if you take the picture with the camera the content will include EXIF data(at least if I read the file content with the FileReader API).

I can't use canvas cropping if the image includes EXIF data. Because the image get destroyed every time I call .toDataURL(). My guess is it doesn't recognize EXIF data and don't know how to crop a image with EXIF data.

The file content is being base64 encoded by FileReader.readAsDataURL(). And I insert it into img.src.

The cropping is done by drawing a new image with ctx.drawImage(...) based in the old image and I finally got the new image data with c.toDataURL().

So my question how do I remove EXIF data using javascript?

Answer 1

Note, you wrote:

the image get destroyed

I think that problem is not in EXIF data. I think you have the iOS canvas limitation:

The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

This limits don't throw any errors, so then you will try to render or read 6MB image you will get a broken blob/dataURL string and so on. And you will think that File API is broken, canvas methods toDataURL/toBlob are broken, and you will be right. But bugs aren't in browser, this is a system limitation.

There known libs that fix iOS limitations:

• Javascript-Load-Image
• ios-imagefile-megapixel