[image_picker_for_web] Added support for maxWidth, maxHeight and imageQuality

[balvinderz]

Adds support for maxWidth, maxHeight and imageQuality in image_picker_for_web

Fixes flutter/flutter#78170

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the relevant style guides and ran the auto-formatter. (Note that unlike the flutter/flutter repo, the flutter/plugins repo does use dart format.)
• I signed the CLA.
• The title of the PR starts with the name of the plugin surrounded by square brackets, e.g. [shared_preferences]
• I listed at least one issue that this PR fixes in the description above.
• I updated pubspec.yaml with an appropriate new version according to the pub versioning philosophy.
• I updated CHANGELOG.md to add a description of the change.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test exempt.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[balvinderz]

Implementation is based on this : https://labs.madisoft.it/javascript-image-compression-and-resizing/

There are some limitations in this.
imageQuality only works for jpeg images.
I could not find a way to make this work for gif images.

[ditman]

Thanks for the contribution @balvinderz! I think that this one is a little bit too green, and it needs some changes to the approach to make this more modular and testable!

In my opinion, the image resizing code should be extracted from the ImagePickerPlugin class completely. The only thing the plugin knows about resizing images is that it has an instance of an ImageResizer object that accepts and returns XFile instances.

I think the following steps are needed:

• Create a ImageResizer component that deals with images in XFile instances, and resizes them according to the parameters passed by the user.
  • 99% of the code of this component already exists in the _getCompressedUri and _calculateSize methods. Having your own object will allow you to design it more carefully.
• Have an instance of that ImageResizer inside of the ImagePickerPlugin, so it can be:
  • Used when needed to resize images (normal operation)
  • Injectable from tests so it can be mocked out if needed (testability)
• Use the ImageResizer in the pickImage/pickImages methods, if the user wants a resized output
  • Do not pass the image resizing parameters (maxWidth, maxHeight, imageQuality) to the generic methods that pick files and convert them to a XFile!
• Unit tests for the new ImageResizer component
• Unit tests for the new resize images (when the correct parameters are passed) feature.

[balvinderz]

Thanks for the contribution @balvinderz! I think that this one is a little bit too green, and it needs some changes to the approach to make this more modular and testable!

In my opinion, the image resizing code should be extracted from the ImagePickerPlugin class completely. The only thing the plugin knows about resizing images is that it has an instance of an ImageResizer object that accepts and returns XFile instances.

I think the following steps are needed:

• Create a ImageResizer component that deals with images in XFile instances, and resizes them according to the parameters passed by the user.

  • 99% of the code of this component already exists in the _getCompressedUri and _calculateSize methods. Having your own object will allow you to design it more carefully.

• Have an instance of that ImageResizer inside of the ImagePickerPlugin, so it can be:

  • Used when needed to resize images (normal operation)
  • Injectable from tests so it can be mocked out if needed (testability)

• Use the ImageResizer in the pickImage/pickImages methods, if the user wants a resized output

• Do not pass the image resizing parameters (maxWidth, maxHeight, imageQuality) to the generic methods that pick files and convert them to a XFile!

• Unit tests for the new ImageResizer component

• Unit tests for the new resize images (when the correct parameters are passed) feature.

I think I have done all the steps that are mentioned in this.

[ditman]

I've rebased this branch with the latest master, there was a small breakage in CI that required the latest code to pass.

[ditman]

(It's too late to land this. I'll merge on monday.)

[balvinderz]

Thanks for the dash @ditman 😄

[ditman]

@balvinderz highly deserved! ;)

[ditman]

Because of a problem in our CI, this had to be released manually (I just did). This should now be available to everybody from pub.