Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[REF] client side image processing refactor agau #3346

Draft
wants to merge 4 commits into
base: saas-16.4-fix-image-mimetype-safari-agau
Choose a base branch
from

Conversation

agau-odoo
Copy link

pending targeted PR merge -> forward ports -> retarget to master + rebase onto master

…sion

*: website_sale

- store the correct mimetype for processed attachments
- suggest jpeg formats when webp is unavailable in snippet options

When processing images to apply modifications with
`HTMLCanvasElement.toDataURL`, safari and some other webkit browsers
return a png when asked for a webp.

Steps to reproduce (4 cases):
- Use safari or an affected browser
- One of:
  - Image Field
    - In any regular page such as the Discuss home page, click on your
      user profile picture (top-right)
    - Click on Preferences
    - Change the profile picture to a webp image
  - Website editor
    - Insert a snippet containing an image
    - One of:
      - Change the image format to one of the webp formats with a lower
        resolution
      - Crop the image
      - Apply a shape mask
    - Save

Old behavior: Processed images are saved with an image/webp mimetype
even though the actual data type is image/png
New behavior: Processed images are saved with the corresponding
mimetype of the actual data

To fix this, handle all possible implicit conversions through a
`convertCanvasToDataURL` and return both the dataURL and the actual
mimetype in `convertCanvasToDataURL` (new util in web
`image_processing.js`) and `applyModifications` (from web_editor
`image_processing.js`). Each case can then deal with mimetype mismatch
in an appropriate way.

Suggest jpeg formats instead of webp in the image snippet options when
the browser is incapable of generating webp with
`HTMLCanvasElement.toDataURL`.

The tests cover the 4 use cases of `applyModifications` and the
standalone use of `convertCanvasToDataURL`.

task-3847470
- cover images in commit [1]
- image gallery snippet in commit [2]

[1]: 068dcc2
[2]: cbd38e7
@robodoo
Copy link

robodoo commented Jul 5, 2024

This PR targets the un-managed branch odoo-dev/odoo:saas-16.4-fix-image-mimetype-safari-agau, it needs to be retargeted before it can be merged.

@agau-odoo agau-odoo force-pushed the saas-16.4-fix-image-mimetype-safari-agau branch 9 times, most recently from a6be339 to 96a966d Compare July 12, 2024 08:32
@agau-odoo agau-odoo force-pushed the saas-16.4-fix-image-mimetype-safari-agau branch 15 times, most recently from 950ccc2 to 0db4158 Compare July 22, 2024 13:06
@agau-odoo agau-odoo force-pushed the saas-16.4-fix-image-mimetype-safari-agau branch from 0db4158 to c54eb09 Compare July 23, 2024 09:40
@agau-odoo agau-odoo force-pushed the saas-16.4-fix-image-mimetype-safari-agau branch from c54eb09 to fea3672 Compare July 23, 2024 12:44
@agau-odoo agau-odoo force-pushed the saas-16.4-fix-image-mimetype-safari-agau branch 3 times, most recently from 562ccaf to aa81cf5 Compare August 23, 2024 12:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants