fix: Large Dom sizes failing to be drawn correctly into canvas by Daz2345 · Pull Request #197 · bubkoo/html-to-image

Daz2345 · 2021-10-05T16:44:23Z

fix: Large Dom sizes failing to be drawn correctly into canvas when exporting to PNG

When context.drawImage is called within the toCanvas method, we are able
to go over the maximum limits of the browser inbuilt canvas object.
When this happens draw commands within context.drawImage are ignored resulting
in missing parts of the image.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
for details.
This adds a checkCanvasDimensions function to ensure that the image is
appropriately scaled before being drawn and a susbsequent options.skipAutoScale added if a
library user wishes to turn this default functionality off.

Bug fix (non-breaking change which fixes an issue)
Enhancement (changes that improvement of current feature or performance)
My code follows the code style of this project.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.

…xporting to PNG When context.drawImage is called within the toCanvas method, we are able to go over the maximum limits of the browser inbuilt canvas object. When this happens draw commands within context.drawImage are ignored resulting in missing parts of the image. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size for details. This adds a checkCanvasDimensions function to ensure that the image is appropriately scaled before being drawn and a susbsequent options.skipAutoScale if a library user wishes to turn this default functionality off.

biiibooo · 2021-10-05T16:44:40Z

👋 @Daz2345

💖 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 · 2021-10-05T16:51:56Z

Codecov Report

Merging #197 (7402df0) into master (297b17f) will not change coverage.
The diff coverage is 93.75%.

@@           Coverage Diff           @@
##           master     #197   +/-   ##
=======================================
  Coverage   79.93%   79.93%           
=======================================
  Files          10       10           
  Lines         578      578           
  Branches      101      101           
=======================================
  Hits          462      462           
  Misses         56       56           
  Partials       60       60

Impacted Files	Coverage Δ
src/index.ts	`89.09% <93.75%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5e4f1b4...7402df0. Read the comment docs.

biiibooo · 2021-10-09T05:34:22Z

👋 @Daz2345 Congrats on merging your first pull request! 🎉🎉🎉

# [1.9.0](v1.8.5...v1.9.0) (2021-10-09) ### Bug Fixes * Large Dom sizes failing to be drawn correctly into canvas when exporting to PNG ([#197](#197)) ([1ee2e7f](1ee2e7f)) ### Features * ✨ add svg image with href support ([#198](#198)) ([cb6f916](cb6f916))

biiibooo · 2021-10-09T06:43:08Z

🎉 This PR is included in version 1.9.0 🎉

The release is available on:

# 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 fix PR: unreviewed labels Oct 5, 2021

bubkoo merged commit 1ee2e7f into bubkoo:master Oct 9, 2021

biiibooo bot added PR: merged and removed PR: unreviewed labels Oct 9, 2021

biiibooo bot added the released label Oct 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Large Dom sizes failing to be drawn correctly into canvas#197

fix: Large Dom sizes failing to be drawn correctly into canvas#197
bubkoo merged 1 commit intobubkoo:masterfrom
Daz2345:fix/large_dom_size_canvas_error

Daz2345 commented Oct 5, 2021

Uh oh!

biiibooo bot commented Oct 5, 2021

Uh oh!

codecov bot commented Oct 5, 2021

Uh oh!

biiibooo bot commented Oct 9, 2021

Uh oh!

biiibooo bot commented Oct 9, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Daz2345 commented Oct 5, 2021

Uh oh!

biiibooo bot commented Oct 5, 2021

Uh oh!

codecov bot commented Oct 5, 2021

Codecov Report

Uh oh!

biiibooo bot commented Oct 9, 2021

Uh oh!

biiibooo bot commented Oct 9, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants