Blazor RequestImageFileAsync to keep image EXIF data

[georgeemr]

Is your feature request related to a problem? Please describe.

Maintain Exif metadata when you request a file picture resized.
Example: When I upload an image using InputFile on Blazor, if I request the original file I can get the Exif metadata, but If I request the image resized I lost the information, this could be an important feature because I need to determine the rotation of the picture so I can rotate it automatically and try to avoid the user to manually rotate the picture.

Describe the solution you'd like

There's a way to write the Exif to a current image in Javascript so I think is possible to read the current and add it to the newly resized image, this way the server can receive the resized image and this translates to saving in bandwith, mostly on phone devices where a picture can have a size of 20mb.

[mkArtakMSFT]

Thanks for contacting us. This is indeed not supported currently. Do you have any recommendations / ideas about how this should be done? If you think it's simple feel free to send us a PR so we can discuss it that way. Alternatively, just share your thoughts here before sending a PR.

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[TanayParikh]

I looked into this briefly, we do image resizing here:

aspnetcore/src/Components/Web.JS/src/InputFile.ts

Lines 70 to 80 in 4b48d6f

	const resizedImageBlob = await new Promise(function(resolve: BlobCallback): void {
	const desiredWidthRatio = Math.min(1, maxWidth / loadedImage.width);
	const desiredHeightRatio = Math.min(1, maxHeight / loadedImage.height);
	const chosenSizeRatio = Math.min(desiredWidthRatio, desiredHeightRatio);
	const canvas = document.createElement('canvas');
	canvas.width = Math.round(loadedImage.width * chosenSizeRatio);
	canvas.height = Math.round(loadedImage.height * chosenSizeRatio);
	canvas.getContext('2d')?.drawImage(loadedImage, 0, 0, canvas.width, canvas.height);
	canvas.toBlob(resolve, format);
	});

We need to preserve & extract the EXIF data from the original image, and embed it into the resizedImageBlob. There aren't any standard JS APIs to do this as far as I can tell, but it does seem to be possible via external EXIF libraries.

Due to limited community engagement, and the complexity of extracting/embedding the EXIF data via non-standard APIs this would fall pretty low on our priority list. Leaving open to see if we may want to revisit this in the future.