Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas performance degrades when an image has `base64` data in `src`

See original GitHub issue

Describe the bug

Canvas interaction performance degrades when manipulating images that have base64 data in src

To Reproduce

Drag and drop an image into the canvas while logged out. This way, the image is not uploaded to the assets folder, but instead the image data is inserted as base64 into the src field of the newly created img.

Result: dragging around the img becomes noticeably slower

Expected behaviour

Performance stays the same


Profiling canvas interactions on an image with base64 data image

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

ruggicommented, Oct 18, 2022

A bit more digging 🕵️‍♂️: it looks like the problem is in the parsing of large strings:

const Foo = () => {
  return <img src="data:image/png;base64,..." />

is crazy slow, but

const data = "data:image/png;base64,..."

const Foo = () => {
  return <img src={data} />

seems to be fine.

EDIT: mmh, actually probably the problem is still in the rendering, I’m getting different results now ¯_(ツ)_/¯

ruggicommented, Oct 18, 2022

As per the related discussion, closing this for now as a wontfix since the scope for the issue is only relevant when the img itself is dragged, not the container elements.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Image not drawing into the canvas using base64 string data
Yes, images produce long base64 strings, but that's fine. I've already shown you how to pass, see the last line in my answer....
Read more >
HTML5 canvas - draw image using base 64 encoded png string
HTML5 canvas can be used to draw image from base64 encoded blob using drawImage(). In this case image source will be data:image/png;base64 ......
Read more >
Inline Image Previews with Sharp, BlurHash, and Lambda ...
This solves the content reflow problem but at the expense of performance. The user is blocked from seeing any content until the images...
Read more >
2.6 Saving Images and Base64 Encoding - YouTube Data -APIs-JS Let's add an image from the webcam to our database. For this project, we will be using ...
Read more >
Rendering base64 images with react-native-canvas · Issue #23
I'm trying to render a base64 image on the canvas but keep getting an error: 'TypeError: type error'. I'm using the `' component...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found