search

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.81k stars 547 forks source link

Issue With Image width and Height #82

Closed Mudassar755 closed 3 years ago

Mudassar755 commented 3 years ago

Expected Behavior

I want to convert a DIV element into the image in react.js. It's converting exactly that DIV, but it adds some extra width and height in the image, with toPNG, toJpeg functions, with toSvg we get the exact image with same width and height but its base64-size too large, so I want to get the same result in PNG or JPEG with small size. here is the link: orignnale-code

https://codesandbox.io/s/jovial-cohen-ugwum?file=/src/App.js

it should return same result as toSvg in the toPng and toJpeg functions

Current Behavior

I want to convert a DIV element into the image in react.js. It's converting exactly that DIV, but it adds some extra width and height in the image, with toPNG, toJpeg functions, with toSvg we get the exact image with same width and height but its base64-size too large, so I want to get the same result in PNG or JPEG with small size. toJpeg

https://codesandbox.io/s/jovial-cohen-ugwum?file=/src/App.js

it should return same result as toSvg in the toPng and toJpeg functions

Possible Solution

it should return same result as toSvg in the toPng and toJpeg functions

Steps To Reproduce

  1. ...
  2. ...
  3. ...
Error Message & Stack Trace

```txt ```

Additional Context

Your Environment

window10 Node: v12.16.2 React: v16.13.1

biiibooo[bot] commented 3 years ago

👋 @Mudassar755

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

gtabuada commented 3 years ago

The generated image size is based off it's root node dimensions multiplied by the device pixel ratio. If you want to keep the generated image's size equal to your node's, add the following to your config object: pixelRatio: 1

Rizzlle commented 3 years ago

and why image is blurry ? any idea?

Mudassar755 commented 3 years ago

It's because of image quality, by default it's 1 (100%), but I set it 0.3 (30%), to reduce the size of the base64.

anonyhostvn commented 3 years ago

The generated image size is based off it's root node dimensions multiplied by the device pixel ratio. If you want to keep the generated image's size equal to your node's, add the following to your config object: pixelRatio: 1

Thank you for your answer.

papakay commented 3 years ago

@ua-lock I'm having similar issue on a mac device. When i set the pixelRation to 2, the overall image size is exactly twice the actual size of the html node. However the node image still uses pixelRation of 1. I'm on a macbook with retina screen.

Please see the output image below

htmlToImage.toJpeg(exportNode, { backgroundColor: "#f5f7fa", pixelRatio: 2 })

portfolio-performance (2)

gtabuada commented 3 years ago

@papakay This happened to me before, but was only a concern of styling. The parent node gets stretched based off pixelRatio, but it's children elements might not stretch together if their dimensions (width x height) have fixed size, or it's max-(width|height) has a fixed value. Make sure you style it accordingly, with relative units, so it takes most of the space available.

If that doesn't solve it, there might be other workarounds, like manually doubling the node's dimensions before passing it to htmlToImage.toJpeg().

Also, take note that the getPixelRatio() function changes went live in the latest commit, so make sure you have updated your package aswell.

papakay commented 3 years ago

Thank you so much @ua-lock for this useful information. I'm using version 1.3.21 which i believe has the latest update.

I've confirmed that the children element doesn't have fixed width and height. On bigger screen the size of the exported jpg is different.

Please do you have any idea on how i could double the node's dimensions?

Thanks a lot.

andreyk-code commented 3 years ago

thank you for adding pixel ratio functionality!!

it resolved an issue I was having: if browser gets zoomed using +/- keys, the exported image was also affected. Now with pixel ratio, export stays the size defined in width/height.

biiibooo[bot] commented 3 years ago

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

biiibooo[bot] commented 3 years ago

Hey again! It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Thanks again for being part of the Antv community! 💪💯

biiibooo[bot] commented 2 years ago

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.