Image is cropped in Firefox

[Amaury Permer]

Use case: description, code

when generating an image, the image appears cropped, adding width property helps but still cropped

const container = document.getElementById("container");
domtoimage
    .toPng(container, {
      width: 490,
    })
    .then(function (dataUrl) {
      let img = document.createElement("img");
      img.src = dataUrl;
      document.body.appendChild(img);
    });

Note, height property seems to do nothing at least in Firefox

Expected behavior

This is a Chrome screenshot

Actual behavior (stack traces, console logs etc)

With width property

Without

Library version

3.2.0

Browsers

• Chrome 49+
• Firefox 45+

[Joshua Zinkovsky]

Had the same problem in Firefox. Scaling up the image this way (not using the scale property in the options parameter) should fix it for you:

var scale = 2; // make this whatever you want

var dataUrl = await domtoimage.toJpeg(node, {
  width: node.clientWidth * scale,
  height: node.clientHeight * scale,
  style: {
    transform: "scale(" + scale + ")",
    transformOrigin: "top left"
  }
});

var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);

[Gabe Petersen]

Thanks @Josh961 - this works perfectly!

[Amaury Permer]

I believed I had responded to this, but yes, it works perfectly!
Thank you so much @Josh961!!!