How to get better image quality?

[corey34]

How do you get better image quality? The standard DPI seems to be 72 which is not good enough for my case. I have seen some reference to DPI as an option but it appears that it may have been removed on the current version?

I have also seen that the scale option, in combination with width and height options, being used and that works for web view but when saving the image on my computer it's not what I need.

Is there a way to export an image with a higher DPI?

Thanks

Specifications:

• html2canvas version tested with: v1.0.0-alpha.12

[ffflabs]

It depends on what kind of objects are you trying to capture, I guess.

However, you said the problem affects the downloaded image. How exactly are you downloading the image?

[corey34]

Sorry, should have been more descriptive. I am exporting PNG images, made up of layered images. Some of those layered images are resized smaller with JQueryUI Resizeable (https://jqueryui.com/resizable/).

The saved image is a lower quality than what shows on display.

I am using Filesaver (https://github.com/eligrey/FileSaver.js) and just my mouse (right click, save as...). Both have the same outcome.

Thanks

[corey34]

A little more information after using this more. It appears that most of the quality issues I am seeing are coming from images which source is much bigger than what is displayed on the screen. For example, the image may display as a 300x250 but the actual image is 1200x1000. The image looks good on the computer screen but after using html2canvas, the image loses quality. However, if the final image displays closer to it's source size of 1200x1000, then it looks great.

I'm new to how canvas's work so maybe that is a common issue and not actually related to html2canvas?

If this is unrelated to html2canvas, does anyone recommend a better way of doing this? Is there something I can use that would transform my image into a better quality image before using html2canvas?

Thanks

[corey34]

@amenadiel, any thoughts on this? I've spent countless hours on this over the last few months and still cannot get this.

[selmalee]

@amenadiel, any thoughts on this? I've spent countless hours on this over the last few months and still cannot get this.

try html2canvas(dom, { scale: 2 })
It is mentioned in #1087

[KingAmo]

use <img /> instead of background-image get better image quality