question-mark
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.

toDataURL() enlarges image three times

See original GitHub issue

It seems that toDataURL scales up the png image tree times. The following code should give a 100x100px image file, shouldn’t it? I get a 300x300px file.

If this is by design, I’ll go ahead and compensate for it. But if it’s a bug that will be fixed eventually my compensation will lead to downscaled images when it’s fixed.

    return (
      <View
        onLayout={() =>
          this.svg.toDataURL((base64) => {
            fs.writeFile(localPath, base64, 'base64');
          })}
      >
        <Svg
          width={100}
          height={100}
          ref={(ref) => {
            this.svg = ref;
          }}
        >
          <SvgRect
            x={5}
            y={5}
            width={90}
            height={90}
            stroke={'red'}
            strokeWidth={2}
            fill={'yellow'}
          />
        </Svg>
      </View>
    );

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:32

github_iconTop GitHub Comments

1reaction
msandcommented, Mar 11, 2019

Btw, I’ve added support for calling toDataUrl already in the ref function, don’t have to wait for onLayout in javascript anymore.

1reaction
msagerydcommented, Feb 10, 2019

@msand strikes again =) To me, this is a perfect solution. Thank you very much. I won’t dig into this part of my app in another week or two. Should I use your branch, or will you merge this into master anytime soon?

Read more comments on GitHub >

github_iconTop Results From Across the Web

toDataURL() enlarges image three times · Issue #855 - GitHub
It seems that toDataURL scales up the png image tree times. The following code should give a 100x100px image file, shouldn't it?
Read more >
toDataURL() small screens, small saved image - Stack Overflow
My challenge is that I am using .toDataURL() to get the entire contents of the canvas saved as an image. As I understand,...
Read more >
HTMLCanvasElement.toDataURL() - Web APIs | MDN
toDataURL() method returns a data URL containing a representation of the image in the format specified by the type parameter.
Read more >
Cool Tricks for Resizing Images in JavaScript - Cloudinary
Resizing images with JS is particularly useful for creating online product galleries, in which users can zoom in or out of images according ......
Read more >
HTML5 Canvas Export to High Quality Image Tutorial - Konva
If you need to export a stage as an image or as base64 then you can use the stage.toDataURL() or stage.toImage() methods. By...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found