Html2canvas: background images blurry in export

Created on 13 Mar 2018 · 7Comments · Source: niklasvh/html2canvas

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.

slideexport

Source

moettinger

Most helpful comment

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.

monomichael on 18 Oct 2018

👍15 👎1

All 7 comments

@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.

olecom on 15 Mar 2018

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

moettinger on 15 Mar 2018

@moettinger

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

That must be feature of your Viewer.

olecom on 19 Mar 2018

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.

monomichael on 18 Oct 2018

👍15 👎1

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

xiaoTuiMao on 9 Aug 2019

same issue here

jonasborneland on 29 Nov 2019

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>