Dom-to-image: Bad quality with react js

[da1z]

Quality of png is super low.

const onGetPictureClick = () => {
    var node = document.getElementById('tweetCard');
    domtoimage
      .toPng(node, {
        quality: 0.99,
      })
      .then(function (dataUrl) {
        var img = new window.Image();
        img.src = dataUrl;
        document.getElementById('container').appendChild(img);
      })
      .catch(function (error) {
        console.error('oops, something went wrong!', error);
      });
  };

[csandman]

I haven't found a guaranteed strategy to make the image as good as possible but it could be that you're using a retina screen. This comment https://github.com/tsayen/dom-to-image/issues/69#issuecomment-486146688 gives a solution that definitely improved my output image quality so you could try that. Hope it helps!

[Fantasim]

Got the same problem as well, just duplicate the component before screenshotting it and scale it by 3.
It solved the problem.

(It doesn't come from React, it's just a scale matter)

[csandman]

Got the same problem as well, just duplicate the component before screenshotting it and scale it by 3.
It solved the problem.

(It doesn't come from React, it's just a scale matter)

@Fantasim In that case, is the output image 3 times the size of the original as well?

[Fantasim]

@csandman Yes, it is.

Here is my code.

const scale = 3    
const node = document.getElementById("post")

const style = {
    transform: 'scale('+scale+')',
    transformOrigin: 'top left',
    width: node.offsetWidth + "px",
     height: node.offsetHeight + "px"
}

const param = {
     height: node.offsetHeight * scale,
     width: node.offsetWidth * scale,
      quality: 1,
     style
}

domToImage.toJpeg(node, param)

[akshaybosamiya]

@csandman Yes, it is.

Here is my code.

const scale = 3    
const node = document.getElementById("post")

const style = {
    transform: 'scale('+scale+')',
    transformOrigin: 'top left',
    width: node.offsetWidth + "px",
     height: node.offsetHeight + "px"
}

const param = {
     height: node.offsetHeight * scale,
     width: node.offsetWidth * scale,
      quality: 1,
     style
}

domToImage.toJpeg(node, param)

Value of scale can be calculated dynamically.
var scale = Math.min(node.offsetWidth/contentWidth, node.offsetHeight/contentHeight);
Where contentWidth and contentHeight are actual width and height of Image area.

[jrmarqueshd]

I was the same problem of the @da1z, and the solution suggested by @Fantasim solved.