Blurry when used pixelRatio 1 on mobile

Expected Behavior

The downloaded image show have optimum quality like what you see is what you get.

Current Behavior

At a point the image was too small on mobile when downloaded, it didn’t scale up the width and height but small image top left and blank background covers the rest. The solution suggested from a report here was to use pixelRatio to 1 explicitly and it worked but the image is now blurry when downloaded on mobile. Please I need solution to this because it’s affecting production .

Possible Solution

Steps To Reproduce

1. …
2. …
3. …

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

• html-to-image: [e.g. 0.1.0]
• OS: [e.g. macOS Sierra 10.12.3]
• Browser: [e.g. chrome 78.0.3904.108]

[drkPrince]

Try scaling the image size like this,

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

 const param = {
    height: node.offsetHeight * scale,
    width: node.offsetWidth * scale,
    style
 }
 
 const blob = await htmlToImage.toPng(node, param)

[vivcat[bot]]

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.