search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.37k stars 1.68k forks source link

Extra Pixel on the image output #203

Open weilinzung opened 6 years ago

weilinzung commented 6 years ago

here is the output data, which has a 1px extra on the right, what would be the issue?

It should be 240px X 400px, but gave me 241px X 400px.

Copy and Paste to your broswer address bar, you should see it~

And here is the demo: https://codepen.io/weilinzung/pen/geRgJZ, create 4 extra pixel on the height.

data:image/png;base64,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

MarcelWeidum commented 6 years ago

Same!

r0bc4ry commented 6 years ago

I'm seeing the same thing. Looks like it's only happening for me on odd numbers though (1218 outputs 1218, but 1219 outputs 1220). Any odd numbered dimension I tried always gave me an extra pixel.

MarcelWeidum commented 6 years ago

You can give it the width and height: domtoimage.toPng(node, {width: 100, height: 100})

r0bc4ry commented 6 years ago

I've tried both with and without providing width/height. In both cases the output image contains an extra pixel. In my case, there is one extra pixel on the output image's height vs. both the DOM node's height and the provided height. My guess is there is a fractional pixel somewhere in the library that is being rounded.