fix: ensure images are totally prcoessed before using them (ios)

[sbel-odoo]

Description

img.decode = () => resolve(img); is supposed to ensure that the image is fully processed but is misused. Decode is not a setter, it's a method that returns a promise when the image is fully decoded. While this code wait for the image to load it does not wait for it to be fully ready (processed).

img.decode() ensures that the image has been fully decoded before continuing.

We go one step further with requestAnimationFrame. This defers the execution and will ensure that the resolved image is rendered in the next frame. It's more important in devices like Ipad because the broswers tend to handle image operations differently, thus creating rendering and timing issues.

Motivation and Context

Images were not rendered when printing documents which have images on ipad. But is is working fine outside IOS. IOS has been know to have some rendering and timing issues.

Fixes https://github.com/bubkoo/html-to-image/issues/461

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Enhancement (changes that improvement of current feature or performance)
• [ ] Refactoring (changes that neither fixes a bug nor adds a feature)
• [ ] Test Case (changes that add missing tests or correct existing tests)
• [ ] Code style optimization (changes that do not affect the meaning of the code)
• [ ] Docs (changes that only update documentation)
• [ ] Chore (changes that don't modify src or test files)

Self Check before Merge

• [x] My code follows the code style of this project.
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [x] I have read the CONTRIBUTING document.
• [ ] I have added tests to cover my changes.
• [ ] All new and existing tests passed.

[biiibooo[bot]]

👋 @sbel-odoo

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add graph.scale() method
• docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

• Follow the TypeScript coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 63.10%. Comparing base (b751cbf) to head (a7863de). Report is 40 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #478      +/-   ##
==========================================
+ Coverage   62.93%   63.10%   +0.17%     
==========================================
  Files          10       10              
  Lines         580      580              
  Branches      143      143              
==========================================
+ Hits          365      366       +1     
  Misses        151      151              
+ Partials       64       63       -1     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[liusome]

when will the version be updated?

[sbel-odoo]

when will the version be updated?

How should I do this?

[rogeriopgp]

We have same issue here. Any news? Was the pull approved?

[cwbuecheler]

Ran into this same issue today with Safari MacOS. Would love to see this pull approved if it fixes the issue!

[eduardcotmrf]

when is this fix going to be released? I'm getting the blanc images on safari

[allen0815]

I tried it. It doesn't useful.

[biiibooo[bot]]

👋 @sbel-odoo Congrats on merging your first pull request! 🎉🎉🎉

[biiibooo[bot]]

:tada: This PR is included in version 1.11.12 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[gustavopch]

This PR indeed fixes how image.decode() is meant to be used — it's not a callback setter. However, I've tested this function in my own html-to-image-like custom algorithm, and it doesn't seem to help. The only effective workaround in my tests was to call context.draw() multiple times. It is supposed to wait until the image is completely ready to be rendered, but I believe the implementation is not correct in WebKit.

[Rabithua]

https://github.com/bubkoo/html-to-image/issues/461#issuecomment-2911477489 https://jhildenbiddle.github.io/canvas-size/#/?id=mobile

it doesnt work on 1.11.13, still blank image Could it be because of iOS Safari's canvas limitation？

[KingAmo]

I still have the issue, v 1.11.13