Open da1z opened 4 years ago
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!
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)
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?
@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)
@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.
I was the same problem of the @da1z, and the solution suggested by @Fantasim solved.
Quality of png is super low.