feat: add usePageCss option, add toCanvasList and toImage method for large html #473

hzsrc · 2024-08-16T07:40:00Z

…arge amount of sub nodes

Description

Motivation and Context

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.

…rge amount of sub nodes

biiibooo · 2024-08-16T07:40:13Z

👋 @hzsrc

💖 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-08-16T07:44:56Z

Codecov Report

Attention: Patch coverage is 68.49315% with 23 lines in your changes missing coverage. Please review.

Project coverage is 63.10%. Comparing base (b751cbf) to head (7cba196).
Report is 13 commits behind head on master.

Files with missing lines	Patch %	Lines
src/util.ts	53.84%	13 Missing and 5 partials ⚠️
src/index.ts	83.33%	2 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #473      +/-   ##
==========================================
+ 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.

…ed to 1px, but in <img src="svg"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.

accesslint

There are accessibility issues in these changes.

accesslint · 2024-08-16T11:31:40Z

src/util.ts

 ): Promise<string> {
  const xmlns = 'http://www.w3.org/2000/svg'
  const svg = document.createElementNS(xmlns, 'svg')
  const foreignObject = document.createElementNS(xmlns, 'foreignObject')

-  svg.setAttribute('width', `${width}`)
-  svg.setAttribute('height', `${height}`)
+  // fix: if ratio=2 and style.border='1px', in html it is actually rendered to 1px, but in <img src="svg"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.


This image is missing a text alternative. This is a problem for people using screen readers.

…ation of canvas size, so this can export a very large htm. And use a ``getMaxCanvasHeight` method to raise the canvas size limit from 16384 to 65535(Chrome) or 32767(Firefox)

accesslint

There are accessibility issues in these changes.

accesslint · 2024-08-17T13:56:30Z

src/util.ts

 ): Promise<string> {
  const xmlns = 'http://www.w3.org/2000/svg'
  const svg = document.createElementNS(xmlns, 'svg')
  const foreignObject = document.createElementNS(xmlns, 'foreignObject')

-  svg.setAttribute('width', `${width}`)
-  svg.setAttribute('height', `${height}`)
+  // fix: if ratio=2 and style.border='1px', in html it is actually rendered to 1px, but in <img src="svg"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint

There are accessibility issues in these changes.

accesslint · 2024-11-16T01:56:57Z

src/util.ts

+    return urlToImg(url).then(function(img: HTMLImageElement): Promise<HTMLImageElement> | HTMLImageElement {
+      var ctx = get2dCtx(1, BCheckHeight)
+      ctx.drawImage(img, Math.floor(img.width / 2), img.height - BCheckHeight, 1, BCheckHeight, 0, 0, 1, BCheckHeight)
+      //win.document.write(i + '<img src="' + ctx.canvas.toDataURL() + '" style="width:10px" />'); //debug


This image is missing a text alternative. This is a problem for people using screen readers.

This will fix some problems that the last page of exported pdf is truncated.

feat: add option to resolve problems which caused by html that has la…

d5c17e1

…rge amount of sub nodes

biiibooo bot added the PR: unreviewed label Aug 16, 2024

fix: if ratio=2 and style.border='1px', in html it is actually render…

f5afad4

…ed to 1px, but in <img src="svg"> it is rendered to 2px. Then height is different and the bottom 1px is lost, 10 nodes will lost 10px.

accesslint bot reviewed Aug 16, 2024

View reviewed changes

hzsrc added 2 commits August 16, 2024 19:37

fix: use getPixelRatio()

5b7cfe2

feat: add toCanvasList and toImage method to get rid of the limit…

8ea57e6

…ation of canvas size, so this can export a very large htm. And use a ``getMaxCanvasHeight` method to raise the canvas size limit from 16384 to 65535(Chrome) or 32767(Firefox)

accesslint bot reviewed Aug 17, 2024

View reviewed changes

fix: img missing alt

56b099e

hzsrc changed the title ~~feat: add option to resolve problems which caused by html that has l…~~ feat: add usePageCss option, add toCanvasList and toImage method for large html Aug 17, 2024

hzsrc mentioned this pull request Aug 17, 2024

ComputedStyle set to all elements, but it causes SVG use element can't override reference object style, so generate wrong style image. #440

Open

hzsrc added 5 commits September 10, 2024 15:25

fix: url(...) in css file lose efficacy

fc79106

Support image in html or image/font in <style>

2ea87c3

innerText

31a2400

fix: html encode

93b5841

避免图像底部不完整的问题

4b37fe0

accesslint bot reviewed Nov 16, 2024

View reviewed changes

hzsrc added 2 commits November 18, 2024 18:20

fix: add checkTail to whether the svg tail is integrated.

a538140

This will fix some problems that the last page of exported pdf is truncated.

alt

7cba196

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add usePageCss option, add toCanvasList and toImage method for large html #473

feat: add usePageCss option, add toCanvasList and toImage method for large html #473

hzsrc commented Aug 16, 2024

biiibooo bot commented Aug 16, 2024

codecov bot commented Aug 16, 2024 •

edited

Loading

accesslint bot left a comment

accesslint bot Aug 16, 2024

accesslint bot left a comment

accesslint bot Aug 17, 2024

accesslint bot left a comment

accesslint bot Nov 16, 2024

feat: add usePageCss option, add toCanvasList and toImage method for large html #473

Are you sure you want to change the base?

feat: add usePageCss option, add toCanvasList and toImage method for large html #473

Conversation

hzsrc commented Aug 16, 2024

Description

Motivation and Context

Types of changes

Self Check before Merge

biiibooo bot commented Aug 16, 2024

codecov bot commented Aug 16, 2024 • edited Loading

Codecov Report

accesslint bot left a comment

Choose a reason for hiding this comment

accesslint bot Aug 16, 2024

Choose a reason for hiding this comment

accesslint bot left a comment

Choose a reason for hiding this comment

accesslint bot Aug 17, 2024

Choose a reason for hiding this comment

accesslint bot left a comment

Choose a reason for hiding this comment

accesslint bot Nov 16, 2024

Choose a reason for hiding this comment

codecov bot commented Aug 16, 2024 •

edited

Loading