The HTML canvas quietly deletes your photo's metadata — and one day that bites you
I build browser-based image tools, and the single most confusing class of bug reports I get all trace back to the same fact: the moment a photo passes through a <canvas> , its metadata is gone. No EXIF, no GPS, no color profile, no orientation flag. The canvas carries pixels and nothing else. Most of the time that's a feature. Sometimes it's a silent disaster. Here's both sides. What actually…
The HTML canvas quietly erases a photo's metadata when it processes the image, and you might incur the consequences later. This issue primarily affects developers who build browser-based image tools. The canvas carries only pixels, discarding all other information such as EXIF, GPS data, color profiles, and orientation flags. This behavior can be both beneficial and problematic.
On the positive side, the canvas automatically strips metadata whenever an image passes through it. This can be advantageous when re-encoding, resizing, or converting image formats, as the resulting output will be devoid of any ancillary data. Consequently, a browser tool that converts an image also serves as an automatic metadata stripper.
However, the canvas's metadata loss can also lead to unexpected issues. One notable problem is the orientation bug, particularly with images captured by iPhones or other cameras that store the image in the original sensor orientation but embed an EXIF Orientation flag to indicate how the image should be displayed. When an image is drawn onto a canvas, the canvas discards the orientation flag, resulting in a permanently rotated image.
The bug becomes evident only after the round-trip through the canvas, leaving users confused as the preview appears correctly rotated, but the downloaded image is not.
To mitigate the orientation bug, developers must explicitly handle the orientation data before drawing the image onto the canvas. This can be achieved by using the createImageBitmap() method with the imageOrientation: "from-image" option, which ensures the pixels are upright before the canvas processes them. Alternatively, applying CSS image-orientation: from-image to the canvas can also address the issue, although this only affects the display and not the data read by drawImage.
In summary, developers should be aware that the HTML canvas discards all metadata when processing images. While this feature can be beneficial for stripping metadata during image conversion, it can also lead to unintended consequences like the orientation bug. To ensure accurate results, it is essential to handle orientation data explicitly before drawing the image onto the canvas, especially when local processing is involved.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
