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

Add a warning/suggestion to canvas.toDataURL to prefer toBlob #33748

Closed
evilpie opened this issue May 25, 2024 · 2 comments · Fixed by #34730
Closed

Add a warning/suggestion to canvas.toDataURL to prefer toBlob #33748

evilpie opened this issue May 25, 2024 · 2 comments · Fixed by #34730
Labels
Content:WebAPI Web API docs effort: small This task is a small effort. good first issue A good issue for newcomers to get started with.

Comments

@evilpie
Copy link
Contributor

evilpie commented May 25, 2024

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

toDataURL creates huge strings, which can be inefficient memory-wise. Due to the URL size limit in Firefox (and other browsers?) toDataURL can actually return strings that are too large to be parsed when assigned to e.g. img.src.

What did you expect to see?

I think it would be useful to have an information box on the toDataURL page to suggest using toBlobURL in combination with URL.createObjectURL instead, i.e. this example.

Do you have any supporting links, references, or citations?

https://bugzilla.mozilla.org/show_bug.cgi?id=1898679

Do you have anything more you want to share?

No response
@evilpie evilpie added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label May 25, 2024
@github-actions github-actions bot added the Content:WebAPI Web API docs label May 25, 2024
@hamishwillee hamishwillee added effort: small This task is a small effort. good first issue A good issue for newcomers to get started with. and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels May 26, 2024
@hamishwillee
Copy link
Collaborator

hamishwillee commented May 26, 2024 •
edited
Loading

This is a good idea, but I'd be tempted by a warning box rather than just a note.

@evilpie Is there an approximate image size in some meaningful unit (pixels?) at which we can tell people they really need to worry? Or is it a matter that always recommending via toBlobUrl makes sense?

@gijsk
Copy link
Contributor

gijsk commented May 29, 2024

@evilpie Is there an approximate image size in some meaningful unit (pixels?) at which we can tell people they really need to worry? Or is it a matter that always recommending via toBlobUrl makes sense?

I'm not @evilpie but I'd suggest just always recommending toBlobUrl. data URIs, even at smaller sizes, mean that the browser has to keep a copy of the data as a string (as you can call getAttribute on the image where you assign to src, or read its src property), which duplicates the contents of the data. Even though a 1MB data URI "works" pretty well in browsers, it's a lot of data that the browser has to copy around in memory etc. blob URIs are always more efficient.

Of course data URIs have their place for e.g. 1x1 pixel things but as long as any warning isn't overbearing that seems fine to me.

@ragul1697 ragul1697 mentioned this issue Jul 9, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Content:WebAPI Web API docs effort: small This task is a small effort. good first issue A good issue for newcomers to get started with.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix for Add a warning/suggestion to canvas.toDataURL to prefer toBlob ragul1697/content
3 participants
@evilpie @gijsk @hamishwillee