fix: ensure images are totally prcoessed before using them (ios) by sbel-odoo · Pull Request #478 · bubkoo/html-to-image

sbel-odoo · 2024-10-11T07:33:12Z

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 #461

Types of changes

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

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

`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.

biiibooo · 2024-10-11T07:33:24Z

👋 @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 · 2024-10-11T07:34:31Z

Codecov Report

All modified and coverable lines are covered by tests ✅

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

liusome · 2024-10-15T03:51:01Z

when will the version be updated?

sbel-odoo · 2024-10-16T07:12:09Z

when will the version be updated?

How should I do this?

rogeriopgp · 2024-10-22T18:10:12Z

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

cwbuecheler · 2024-11-05T11:29:46Z

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

eduardcotmrf · 2024-11-11T13:23:26Z

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

allen0815 · 2024-12-23T14:44:41Z

I tried it. It doesn't useful.

biiibooo · 2025-02-12T03:55:00Z

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

## [1.11.12](v1.11.11...v1.11.12) (2025-02-12) ### Bug Fixes * add possibility to use own handling of onerror which will not en… ([#453](#453)) ([04160c3](04160c3)) * ensure images are totally prcoessed before using them (ios) ([#478](#478)) ([51fb98f](51fb98f)) * Fix `fontEmbedCSS ` incorrect sizing ([#422](#422)) ([7020162](7020162)) ### Performance Improvements * embed only used fonts ([#476](#476)) ([09bee44](09bee44)) * svg cloning optimized using deep clone ([#462](#462)) ([9aac2fd](9aac2fd))

biiibooo · 2025-02-12T09:21:22Z

🎉 This PR is included in version 1.11.12 🎉

The release is available on:

Your semantic-release bot 📦🚀

gustavopch · 2025-02-12T11:47:41Z

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 · 2025-05-30T12:08:31Z

#461 (comment)
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 · 2025-06-10T12:20:51Z

I still have the issue, v 1.11.13

# 1.0.0 (2025-09-21) ### Bug Fixes * 🐛 UMD bundle is missing local source dependencies ([bubkoo#138](https://github.com/ruediste/html-to-image/issues/138)) ([67be116](67be116)) * 🐛 [bubkoo#74](https://github.com/ruediste/html-to-image/issues/74) process reference ([bubkoo#75](https://github.com/ruediste/html-to-image/issues/75)) ([9e9d71b](9e9d71b)) * 🐛 apply css styles to svg elements ([85b2859](85b2859)) * 🐛 auto install semantic-release-config ([aff7edc](aff7edc)) * 🐛 cannot assign to read only property 'className' of object '#<… ([7d5a13b](7d5a13b)) * 🐛 cloneCSSStyle: copy transformOriginProp ([bubkoo#297](https://github.com/ruediste/html-to-image/issues/297)) ([76b978a](76b978a)) * 🐛 config changelog ([297b17f](297b17f)) * 🐛 font format could be without qoutation ([bubkoo#217](https://github.com/ruediste/html-to-image/issues/217)) ([2a96149](2a96149)) * 🐛 fontAwesome icons are not included in the resulting image on safari ([bubkoo#131](https://github.com/ruediste/html-to-image/issues/131)) ([c6ebb34](c6ebb34)) * 🐛 parse [@import](https://github.com/import) rules in fetched CSS ([bubkoo#100](https://github.com/ruediste/html-to-image/issues/100)) ([553c7e1](553c7e1)) * 🐛 process is not defined ([a2c7d03](a2c7d03)) * 🐛 publish to github package ([f0914a2](f0914a2)) * 🐛 publish to github package ([44e358e](44e358e)) * 🐛 publish to github package ([51ed412](51ed412)) * 🐛 publish to github package ([acde2cc](acde2cc)) * 🐛 push back ([f0c56f6](f0c56f6)) * 🐛 release ([807745f](807745f)) * 🐛 release config ([1032077](1032077)) * 🐛 render svg as html elements ([5e54101](5e54101)) * 🐛 set selected attribute on option to draw it ([bubkoo#280](https://github.com/ruediste/html-to-image/issues/280)) ([caf97c8](caf97c8)) * 🐛 ternary to convert slot assignedNodes to array ([bubkoo#168](https://github.com/ruediste/html-to-image/issues/168)) ([d12f4e2](d12f4e2)) * 🐛 test release ([81d9e0b](81d9e0b)) * 🐛 test release ([6d58133](6d58133)) * 🐛 test release ([8e663f2](8e663f2)) * 🐛 text breaks on the last word ([bubkoo#270](https://github.com/ruediste/html-to-image/issues/270)) ([062c98a](062c98a)) * 🐛 toCanvas scale ([bubkoo#102](https://github.com/ruediste/html-to-image/issues/102)) ([4049536](4049536)) * 🐛 update keywords ([6a04e03](6a04e03)), closes [#63](https://github.com/ruediste/html-to-image/issues/63) [bubkoo#64](https://github.com/ruediste/html-to-image/issues/64) * 🐛 use bot token ([44f9b28](44f9b28)) * 🐛 use bot token ([2917e50](2917e50)) * 🐛 use bot token ([6af2c7b](6af2c7b)) * 🐛 use bot token ([d9d8f7f](d9d8f7f)) * 🐛 use content-type to get image src type if extension is not provided in url ([bubkoo#98](https://github.com/ruediste/html-to-image/issues/98)) ([5e2da9c](5e2da9c)) * add possibility to use own handling of onerror which will not en… ([bubkoo#453](https://github.com/ruediste/html-to-image/issues/453)) ([04160c3](04160c3)) * apply skipFonts option ([6b7e923](6b7e923)), closes [bubkoo#93](https://github.com/ruediste/html-to-image/issues/93) [bubkoo#310](https://github.com/ruediste/html-to-image/issues/310) * build script ([db7d435](db7d435)) * **ci:** 🐛 👷 disable publish to github package ([b37dbe6](b37dbe6)) * **ci:** 🐛 👷 label from branch name ([e8deafb](e8deafb)) * **ci:** 🐛 👷 publish to github ([b517dca](b517dca)) * **ci:** 🐛 👷 publish to github package ([d769707](d769707)) * **ci:** 🐛 👷 publish to github package ([1d497fe](1d497fe)) * **ci:** 🐛 👷 publish To GitHub Package Registry ([523a73a](523a73a)) * **ci:** 🐛 👷 release config ([39cbcf1](39cbcf1)) * clone iframe nodes better ([bubkoo#352](https://github.com/ruediste/html-to-image/issues/352)) ([bc6b865](bc6b865)) * clone svg symbols ([bubkoo#344](https://github.com/ruediste/html-to-image/issues/344)) ([aec6fa1](aec6fa1)) * **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](https://github.com/ruediste/html-to-image/issues/358)) ([6d28bdb](6d28bdb)), closes [bubkoo#357](https://github.com/ruediste/html-to-image/issues/357) * **config:** 🐛 ⚙️ release config ([6661037](6661037)) * **config:** 🐛 ⚙️ release config ([0f06370](0f06370)) * **config:** 🐛 ⚙️ release config ([82af212](82af212)) * ensure images are totally prcoessed before using them (ios) ([bubkoo#478](https://github.com/ruediste/html-to-image/issues/478)) ([51fb98f](51fb98f)) * fallback to `poster` when `currentSrc` of video is null ([5d79666](5d79666)) * Fix `fontEmbedCSS ` incorrect sizing ([bubkoo#422](https://github.com/ruediste/html-to-image/issues/422)) ([7020162](7020162)) * handle 404 status of fetch ([ecfdbcc](ecfdbcc)) * include source in npm package ([bubkoo#316](https://github.com/ruediste/html-to-image/issues/316)) ([b609415](b609415)) * Large Dom sizes failing to be drawn correctly into canvas when exporting to PNG ([bubkoo#197](https://github.com/ruediste/html-to-image/issues/197)) ([1ee2e7f](1ee2e7f)) * **mask:** add support for -webkit-mask and -webkit-mask-image ([bubkoo#382](https://github.com/ruediste/html-to-image/issues/382)) ([5bdfda7](5bdfda7)) * node version ([13a6989](13a6989)) * revert the change in the pre-install hook ([ed7db4d](ed7db4d)), closes [bubkoo#365](https://github.com/ruediste/html-to-image/issues/365) * specify plugins ([d90ec23](d90ec23)) * switch lazy loading images to eager ([bubkoo#359](https://github.com/ruediste/html-to-image/issues/359)) ([f7c311b](f7c311b)) * test specs ([c7a664e](c7a664e)) * type errors ([b516783](b516783)) * use "secrets.GITHUB_TOKEN" to publish to GPR ([2652288](2652288)) * use frames for video capture & add iframes ([bubkoo#346](https://github.com/ruediste/html-to-image/issues/346)) ([e316c61](e316c61)) ### Features * ✨ add 'fetchRequestInit' option ([bubkoo#210](https://github.com/ruediste/html-to-image/issues/210)) ([c51da3a](c51da3a)) * ✨ add option to skip font embed ([fd8ddde](fd8ddde)) * ✨ add some actions ([ddaa6fb](ddaa6fb)) * ✨ add svg image with href support ([bubkoo#198](https://github.com/ruediste/html-to-image/issues/198)) ([cb6f916](cb6f916)) * ✨ Add viewBox attribute to SVG ([bubkoo#146](https://github.com/ruediste/html-to-image/issues/146)) ([b4ac1d8](b4ac1d8)) * ✨ added a cache for responses to fonts ([ada98c2](ada98c2)) * ✨ added includeQueryParams flag ([bubkoo#260](https://github.com/ruediste/html-to-image/issues/260)) ([259d71e](259d71e)) * ✨ option to specify font embed css ([bubkoo#109](https://github.com/ruediste/html-to-image/issues/109)) ([6d644da](6d644da)) * ✨ option to specify preferred font format ([bubkoo#106](https://github.com/ruediste/html-to-image/issues/106)) ([740b371](740b371)) * ✨ push a release commit and tag, including configurable files ([710851e](710851e)) * ✨ to SvgDataUrl => toSvg ([bf15ff6](bf15ff6)) * ✨ update deps ([8dd487a](8dd487a)) * ✨ use app token ([ef4c60f](ef4c60f)) * support webp format ([bubkoo#343](https://github.com/ruediste/html-to-image/issues/343)) ([09d4810](09d4810)), closes [bubkoo#326](https://github.com/ruediste/html-to-image/issues/326) * **tocanvas:** ✨ adding custom width/height for exported canvas ([bubkoo#110](https://github.com/ruediste/html-to-image/issues/110)) ([aefa9f8](aefa9f8)) ### Performance Improvements * embed only used fonts ([bubkoo#476](https://github.com/ruediste/html-to-image/issues/476)) ([09bee44](09bee44)) * svg cloning optimized using deep clone ([bubkoo#462](https://github.com/ruediste/html-to-image/issues/462)) ([9aac2fd](9aac2fd))

biiibooo bot added the PR: unreviewed label Oct 11, 2024

sbel-odoo mentioned this pull request Oct 11, 2024

[FIX] point_of_sale: ensures images are ready before using them (IOS) odoo/odoo#182803

Closed

bubkoo merged commit 51fb98f into bubkoo:master Feb 12, 2025

biiibooo bot added PR: merged and removed PR: unreviewed labels Feb 12, 2025

biiibooo bot added the released label Feb 12, 2025

ywenhao added a commit to ywenhao/html-to-image that referenced this pull request Feb 18, 2025

fix: blank image in safari, algin bubkoo#461, bubkoo#478

4406abc

Conversation

sbel-odoo commented Oct 11, 2024

Description

Motivation and Context

Types of changes

Self Check before Merge

Uh oh!

biiibooo bot commented Oct 11, 2024

Uh oh!

codecov bot commented Oct 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

liusome commented Oct 15, 2024

Uh oh!

sbel-odoo commented Oct 16, 2024

Uh oh!

rogeriopgp commented Oct 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cwbuecheler commented Nov 5, 2024

Uh oh!

eduardcotmrf commented Nov 11, 2024

Uh oh!

allen0815 commented Dec 23, 2024

Uh oh!

biiibooo bot commented Feb 12, 2025

Uh oh!

biiibooo bot commented Feb 12, 2025

Uh oh!

gustavopch commented Feb 12, 2025

Uh oh!

Rabithua commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KingAmo commented Jun 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

codecov bot commented Oct 11, 2024 •

edited

Loading

rogeriopgp commented Oct 22, 2024 •

edited

Loading

Rabithua commented May 30, 2025 •

edited

Loading