Does canvas ImageData in JavaScript contain EXIF info?

Question

From the Docs

ImageData interface represents the underlying pixel data of an area of a canvas element

I would like to know does ImageData will have only pixel data or pixel data + meta data? Meta data means any EXIF data like orientation, resolution, file type or dpi.

Problem

Whenever I draw images with EXIF Orientation other than 1 to canvas and read it back as ImageData, the resulted ImageData is not properly aligning on Image tag when I am converting ImageData to DataURL.

Issue is observed both in mobile as well as desktop browsers all most all browsers.

Wilkison

Answer 1

<canvas> does not preserve any JPEG metadata, as this metadata is specific to JPEG file itself. Canvas, by definition, is raw pixel data only.

• Parse JPEG file yourself to extract metadata

• Play with canvas

• Use a custom encoder to write JPEG file out of canvas, injecting extracted EXIF metadata back.

Brest

Does inkjet helps in manipulating EXIF data? i.e changing DPI or resolution values? – Wilkison

By "play with canvas" I mean "do whatever canvas operations you want to do with your javascript" – Brest

is there any method which can be used to save metadata along with image data before using canvas.toDataUrl(). – Charmine