Add dpi/scale options for custom resolution

[eKoopmans]

Feature: Custom resolution with DPI/scale options

Simple support for increasing/decreasing the canvas resolution with the new dpi and scale options.

Implementation

When a custom scale is set, the canvas' width/height are multiplied by that scale while keeping its CSS width/height at the original. Then ctx.scale is used to scale all future canvas actions (see here for more info).

The option {dpi: 96} is equivalent to {scale: 1}, and larger values of either option will increase the resolution. If both options are present, scale is ignored in favour of dpi.

Related issues/pull requests

#127, #176, #241, #373, #379, #390, #621, #842, #900, #947, #1039, #1057

[dallington]

How to use this option?

[eKoopmans]

I've added two settings to the options object:

Name	Type	Default	Description
scale	number	1	Increase the resolution by a scale factor (2=double).
dpi	number	96	Increase the resolution to a specific DPI (dots per inch).

(You can see the other settings in the html2canvas documentation).

Here's some example usage:

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});

This pull request hasn't been merged into html2canvas yet, so to use these settings you can make the changes directly to your html2canvas.js file, or you can grab this build that has this and a few other features added in.

[hkreddy]

Hi eKoopmans,

I have downloaded the latest build from above link and tried below coded, but I don't see any changes in the resolution.

Just want to know if I am missing anything else to achieve high resolution

html2canvas(element, {
scale: 2,
onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
dpi: 144,
onrendered: myRenderFunction
});

[eKoopmans]

@hkreddy I've made a jsFiddle to demonstrate. You should notice the difference in resolution (blurriness) of the three canvases that are created. All that is necessary is to set the dpi or scale options when you use html2canvas, and the resulting canvas should have your chosen dpi/scale.

[hkreddy]

@eKoopmans , Thank you very much it is working now.

[cornerbodega]

eKoopmans I don't know you. You don't know me. We may not have any mutual family, or even friends in common. But... I love you. Thank you for this!

[eKoopmans]

Haha you're welcome @cornerbodega!

[mysil2]

Fantastic! I had a div I needed to screenshot and let the user download, but both text and images was somewhat blurry with the standard scaling. Using scale: 2 and resizing the image back to the desired size (the size the standard scaling would output) before download fixed the issue (used html canvas drawImage for resizing the image).

Thank you very much, eKoopmans!

[eKoopmans]

You're welcome, I'm happy to help!

[eggers]

@eKoopmans Thanks for your work. It really helps out. Though, I don't see it working with background images. Have you also seen that issue?

[eggers]

I've figured out the work that needs to be done, the canvas created in resizeImage and used for createPattern needs to be scaled up (Just as the base canvas is scaled up), and before the fill is applied, the scale on the main ctx needs to be reset to 1, and then back again afterwards. Let me know if you'd like me to give you a pull request for the changes.

[eKoopmans]

Sure that would be great, thanks @eggers!

[jpatel3]

@eKoopmans Thanks for this change.

Question on how to use it with svg to canvas? Will the same function do the work?

Currently I am using canvg to get canvas from SVG element and then use canvasObj.toDataURL('image/png'). But the resolution is not that great.

[eKoopmans]

Hey @jpatel, good question! If you're talking about html2canvas.svg.js, I haven't used that library at all, so to be honest I don't know. It looks like it's just a port of fabric.js so I think my changes won't have any affect on it at all, but I'm not sure. If you find anything out then let me know! The trick I'm using to increase resolution is pretty simple and it's described here, so you could see if you can find your own workaround.

[hailehong]

@eKoopmans the scale option works well for the div, but when using background-image for the div tag,
the background image is blurred after scaling. I notice the background image is resized to the original size before scaling, so maybe it makes background image be blurred.

Thank you!

[eKoopmans]

Hey @hailehong, thanks for the comment and sorry I didn't respond earlier. Are you using the latest version of html2canvas, v1.0.0-alpha.x? I notice alpha.3 has some fixes for background size...

[hailehong]

Yes @eKoopmans , I am using the old version.

Thank you!

[eKoopmans]

No problem. So does the latest version of html2canvas resolve your issue?

[hailehong]

Hi @eKoopmans, I have retested with the latest version html2canvas 1.0.0-alpha.8
But the generated background image is still blur after scaling.
The div uses background-size style with cover option.

[HarshSaudagar]

I am trying to use the scale property with the latest version i.e. html2canvas 1.0.0-alpha.8 on an angular 2 project but I'm getting an error which says that " 'scale' does not exist in type 'Html2CanvasOptions' ".

html2canvas(domElement, { background: '#ffffff', width: 1750,  scale: 5})

Above is the code with which I am passing the scale value. Is my method wrong or am I passing the wrong variable? I have shared the error which i received below. Thanks in advance.

[eggers]

@HarshSaudagar is that a typescript error? You'll have to update the declaration manually, or submit a pull request to the DefinitelyTyped html2canvas declaration. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/html2canvas/index.d.ts

[HarshSaudagar]

Thanks @eggers ! That solved my issue

[eKoopmans]

Hey @hailehong, thanks for the heads-up about blurry background images, I'll take a look into it when I have a chance.

[codenchips]

Hi @eKoopmans

Your scaling solution has saved my life so thanks!

However, I also fell foul of the background-image blurriness using your 0.5.0-beta4 version. Took me quite a while to realise that's what it was. I've been able to convert my bg images to img tags now so I'm all good but are you still going to look at this or should we move to the 1.0.0 version in future?

Thanks again!

[vishaltatva]

Hi @eKoopmans .

1. Actually JPEG generated with 300 DPI, doesn't have a DPI of 300.
   For example in this fiddle (https://jsfiddle.net/tvyux7eo/112/). When i update dpi option to 300, the new image generated is not of DPI 300. Look at the screenshot I have attached. When I increase the DPI, the width and height of image is increased but every time DPI is same "96"

2. Is there any option to save image with high resolution? Because I can observe that icons and text on image are blurry.

[mohamedarham93]

You can use Scale like this.
P.s : Change scale value and test your page until you get what you want.

html2canvas(document.getElementById('receiptId'),{scale: 1}).then(function(canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img,'PNG',-150,10);
doc.save('receipt.pdf');
});

[corey34]

Can you use scale, with width and height settings? For me it does not give a higher quality image. It just cuts the image off. You can see below as an example. The top image is with no scale and the bottom one is with scale 2.

[mohamedarham93]

Can you use scale, with width and height settings? For me it does not give a higher quality image. It just cuts the image off. You can see below as an example. The top image is with no scale and the bottom one is with scale 2.

Hi Corey,
Yes you can. Please see bold items below below.You can adjust the width and height by changing the value.You can even go for minus values as I used to get the proper view on your sheet

html2canvas(document.getElementById('receiptId'),{scale: 1}).then(function(canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img,'PNG',-150,10);
doc.save('receipt.pdf');
});

[corey34]

Thanks, although I am little confused. Why the use of jsPDF for this? I just want a PNG.

[Dutta805]

@eKoopmans Can you please share the code to resize the image back to its original dimensions after scale changes to 2, and before canvas.toDataURL. Here is my code.

var container = document.getElementById("temp1");
html2canvas(container, {scale: 2}).then(function(canvas) {
var link = document.createElement("a");
document.body.appendChild(link);
link.download = "sample.png";
link.href = canvas.toDataURL("image/png");
link.target = '_blank';
link.click();
});

[lbm210]

Hi eKoopmans,
I have downloaded the latest build from above link and tried below coded, but the top of my generated PNG image will have a blank area about 30 PX high.

html2canvas(ele, {
dpi: window.devicePixelRatio,
canvas: canvas,
width: width,
height: height,
useCORS: true,
logging: false,
onrendered:function (canvas) {
var base64ImgSrc = canvas.toDataURL("image/png")
var img = $('')
})

[gxmd306]

I've added two settings to the options object:

Name Type Default Description
scale number 1 Increase the resolution by a scale factor (2=double).
dpi number 96 Increase the resolution to a specific DPI (dots per inch).
(You can see the other settings in the html2canvas documentation).

Here's some example usage:

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});

This pull request hasn't been merged into html2canvas yet, so to use these settings you can make the changes directly to your html2canvas.js file, or you can grab this build that has this and a few other features added in.

Hi eKoopmans,
Did you have problems on Firefox ？I could not print complete the content on Firefox.

[elramus]

For what it's worth, I've never been able to get the scale option to make a difference with this issue. It seems to crank up the clarity of text and regular DOM elements properly, but images remain grainy (when using jsPDF with html2canvas's result).

The only workaround I've come up with is to make the dimensions of whatever your final product is double what you actually want, so for example if you're making something sized for an 8.5 x 11 piece of paper, instead make it 17 x 22. Then when you go to print, choose "scale to fit page" or whatever, and it shrinks it down and you've effectively got double resolution.

[striderxfossility]

I think i did it :) I have clear text

  download() {
            const doc = new jsPDF();
            var canvasElement = document.createElement('canvas')

            let self = this

            html2canvas(this.$refs.container, { scale: 4, canvas: canvasElement }).then(function (canvas) {
                const img = canvas.toDataURL("image/jpeg", 1);
                doc.addImage(img,'JPEG',10,10, canvas.width / 16, canvas.height / 16);
                doc.save(self.supplierID + "-combi.pdf");
            });
        }

[DiogoMagro]

Thank you very much @eKoopmans, this fixed my issue with zoom. With option scale i can capture the element with different types of zoom and maintain the original resolution.

[wufeng87]

the dpi option not work now? I only saw the scale option in configuation.md.
version "1.0.0-rc.5"

[rwieruch]

dpi option didn't work for me on the most recent version. When I inspect the image, it still shows the default dpi of my machine. So I used https://github.com/shutterstock/changeDPI (and scaled the image by 3) to get a better resolution for power point presentations.