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.

Sign up for GitHub

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

Jump to bottom

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true #2986

Open
MikkiSolid opened this issue Nov 4, 2022 · 5 comments · May be fixed by #3084
Open

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true #2986

MikkiSolid opened this issue Nov 4, 2022 · 5 comments · May be fixed by #3084

Comments

@MikkiSolid
Copy link

MikkiSolid commented Nov 4, 2022 •
edited

Bug reports:

I repeatedly call

await html2canvas(item, option)
    .then(canvas=>
    {
        let img = canvas.toDataURL("image/png");
        ...
    })

and I see warnings in the browser console: "Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently"
the warning refers to the line

html2canvas/src/dom/document-cloner.ts

Line 226 in 181d1b1

clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);

how to solve the problem with warnings?
Thank you in advance :)

Specifications:

  • html2canvas version tested with: v1.4.1
  • Browser & version: Google Chrome v107.0.5304.88
  • Operating system: Windows 10
@leonardlepadatu
Copy link

Try this:

 const canvas = await html2canvas(element);
 canvas.getContext("2d", {
      willReadFrequently: true,
 });

@MikkiSolid
Copy link
Author

@leonardlepadatu, thanks for the advice but it didn't work. :(
I looked again at the warning in the browser console...
warning refers to line

html2canvas/src/dom/document-cloner.ts

Line 226 in 181d1b1

clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);

@zhaifanhua
Copy link

There will still be this warning

@duy123a
Copy link

duy123a commented Jan 16, 2023

@leonardlepadatu, thanks for the advice but it didn't work. :( I looked again at the warning in the browser console... warning refers to line

html2canvas/src/dom/document-cloner.ts

Line 226 in 181d1b1

clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);

It works, please read his reply carefully.
Find when you create the canvas, then add the {willReadFrequently: true}
You can read more at: https://stackoverflow.com/questions/74101155/chrome-warning-willreadfrequently-attribute-set-to-true

@Tejs1
Copy link

Tejs1 commented Feb 18, 2023 •
edited

@leonardlepadatu, thanks for the advice but it didn't work. :( I looked again at the warning in the browser console... warning refers to line

html2canvas/src/dom/document-cloner.ts

Line 226 in 181d1b1

clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);

It works, please read his reply carefully. Find when you create the canvas, then add the {willReadFrequently: true} You can read more at: https://stackoverflow.com/questions/74101155/chrome-warning-willreadfrequently-attribute-set-to-true

Check if you have updated {willReadFrequently: true} in module folder you are using like cjs, es2015,esm
@zxing/library/browser/BrowserCodeReader.js
image

@vishwas-r vishwas-r linked a pull request Jun 27, 2023 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix for #2986 vishwas-r/html2canvas
5 participants
@leonardlepadatu @MikkiSolid @duy123a @Tejs1 @zhaifanhua