Style option not getting applied on html-to-img

user_10300439 0
Viewed 174

I'm trying to use the html-to-img package to download an image.
The style option that I pass into the call doesn't seem to be being applied.

Not sure if this is a bug with html-to-img... or if I'm doing something wrong.

Looking for anyone with experience with that package, who is willing to lend a hand...

Code recreating problem can be seen here... https://codesandbox.io/s/broken-surf-0kc42?file=/pages/index.js

reactjs node.js javascript
3 Answers

I fixed this by making position static in the options... top and left options didnt work

htmlToImage
    .toPng(element, {
      backgroundColor: "white",
      style: {
        position: "static"
      },
    })
    .then(function (dataUrl) {
      const link = document.createElement("a");
      link.download = "chart.png";
      link.href = dataUrl;
      link.click();
    });
user_103004390

Use html2canvas instead?

import html2canvas from "html2canvas"

html2canvas(element).then((canvas) => {
  const dataURL = canvas.toDataURL()
  const link = document.createElement("a")
  link.download = "myDownload.png"
  link.href = dataURL
  link.click()
});
user_62118660

The reason

It won't show in your downloaded image because browser doesn't render it.

Possible solutions

You can make some fast animation, print it and then move back, for example.

Or, you can use canvas and then download the canvas.

user_74632000
Related