background images blurry in export

[moettinger]

The content I am exporting looks sharp with good resolution before exporting but after exporting it using html2canvas, the parts of the content that are background images appear very blurry and pixelated. For both the top logo of "smarthernews" and the image of sunglasses at the bottom, I've tried various resolution images to no avail. No matter what, they come out blurry. They are both png's.

[olecom]

@moettinger do you use config option scale:
The scale to use for rendering. Defaults to the browsers device pixel ratio.?

https://html2canvas.hertzen.com/configuration

Making it scale: 2 and then Image Multiple Factor: 0.5 for viewing, works for me.

[moettinger]

@olecom I don't see "Image Multiple Factor" as a config. Where do you see that?

[olecom]

@moettinger

I don't see "Image Multiple Factor" as a config. Where do you see that?

That must be feature of your Viewer.

[michael2h4ng]

I've had the same issue. Using <img> instead of background-image worked for me. In my case, it had nothing to do with the scale option.

[xiaoTuiMao]

same issue.
change background-image to img can work success. but sometime i can't use img.
😭😭😭

[jonasborneland]

same issue here

[littlee]

so frustrated 😭

this is my hack

<div style="position:relative; width:100px; height:200px;">
  <img src="./path/to/img.png" alt="" style="display:block; width:100%; height:100%;">
  <div style="position:absolute; top:0; left:0; width:100%; height:100%;">
    <!-- content above background -->
  </div>
</div>

[jayhoogle]

I was using background-image but had the same issue - it's only after searching for a while that I found this thread and have replaced it with an img component, which renders with much more clarity than the background-image did.