New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dpi/scale options for custom resolution #1087

Closed
wants to merge 4 commits into
base: master
from

Conversation

@eKoopmans
Contributor

eKoopmans commented Mar 26, 2017

Feature: Custom resolution with DPI/scale options

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

feature-scale-dpi

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

This comment has been minimized.

Show comment
Hide comment
@dallington

dallington Mar 29, 2017

How to use this option?

dallington commented Mar 29, 2017

How to use this option?

@eKoopmans

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Mar 30, 2017

Contributor

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.

Contributor

eKoopmans commented Mar 30, 2017

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

This comment has been minimized.

Show comment
Hide comment
@hkreddy

hkreddy Apr 12, 2017

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
});

hkreddy commented Apr 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Apr 13, 2017

Contributor

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

Contributor

eKoopmans commented Apr 13, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@hkreddy

hkreddy Apr 14, 2017

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

hkreddy commented Apr 14, 2017

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

@eKoopmans eKoopmans referenced this pull request Apr 14, 2017

Open

New html2pdf package #1176

@cornerbodega

This comment has been minimized.

Show comment
Hide comment
@cornerbodega

cornerbodega Apr 27, 2017

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!

cornerbodega commented Apr 27, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Apr 27, 2017

Contributor

Haha you're welcome @cornerbodega!

Contributor

eKoopmans commented Apr 27, 2017

Haha you're welcome @cornerbodega!

@mysil2

This comment has been minimized.

Show comment
Hide comment
@mysil2

mysil2 Jun 18, 2017

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!

mysil2 commented Jun 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Jun 18, 2017

Contributor

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

Contributor

eKoopmans commented Jun 18, 2017

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

@eggers

This comment has been minimized.

Show comment
Hide comment
@eggers

eggers Jul 12, 2017

@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 commented Jul 12, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@eggers

eggers Jul 13, 2017

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.

eggers commented Jul 13, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Jul 13, 2017

Contributor

Sure that would be great, thanks @eggers!

Contributor

eKoopmans commented Jul 13, 2017

Sure that would be great, thanks @eggers!

Jacob Eggers and others added some commits Jul 13, 2017

sp3ctum added a commit to sp3ctum/squanmate that referenced this pull request Jul 18, 2017

Use newer version of html2canvas directly for now
It takes better quality "screenshots" of html elements.

Found it from here:
niklasvh/html2canvas#1087 (comment)

If that gets merged in then I'll stop using a custom build.

@niklasvh niklasvh added this to Backlog in Backlog Jul 27, 2017

@jpatel3

This comment has been minimized.

Show comment
Hide comment
@jpatel3

jpatel3 Jul 27, 2017

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

jpatel3 commented Jul 27, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Jul 29, 2017

Contributor

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.

Contributor

eKoopmans commented Jul 29, 2017

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.

@niklasvh niklasvh moved this from Backlog to v1.0.0 in Backlog Aug 3, 2017

@avatsaev

This comment has been minimized.

Show comment
Hide comment
@avatsaev

avatsaev Aug 6, 2017

how lazy the maintainer must be to not have a few free minutes, in god damn 5 months, to click a button and push to npm?

avatsaev commented Aug 6, 2017

how lazy the maintainer must be to not have a few free minutes, in god damn 5 months, to click a button and push to npm?

@niklasvh

This comment has been minimized.

Show comment
Hide comment
@niklasvh

niklasvh Sep 8, 2017

Owner

@NikhilRadadiya with a higher scale you are more easily hitting constraints described here #1210

Owner

niklasvh commented Sep 8, 2017

@NikhilRadadiya with a higher scale you are more easily hitting constraints described here #1210

@NikhilRadadiya

This comment has been minimized.

Show comment
Hide comment
@NikhilRadadiya

NikhilRadadiya Sep 8, 2017

@niklasvh By higher resolution, I mean anything that are more than 96dpi which is by default. I tried with dpi:120 as @eKoopmans suggested but it also generates blank canvas most of the times. some times it works great

NikhilRadadiya commented Sep 8, 2017

@niklasvh By higher resolution, I mean anything that are more than 96dpi which is by default. I tried with dpi:120 as @eKoopmans suggested but it also generates blank canvas most of the times. some times it works great

@niklasvh

This comment has been minimized.

Show comment
Hide comment
@niklasvh

niklasvh Sep 8, 2017

Owner

By increasing the dpi, you are increasing the width/height of the outputted canvas which has hard limits on width/height, which if you exceed will either throw you an exception or blank canvas as you are describing.

Owner

niklasvh commented Sep 8, 2017

By increasing the dpi, you are increasing the width/height of the outputted canvas which has hard limits on width/height, which if you exceed will either throw you an exception or blank canvas as you are describing.

@NikhilRadadiya

This comment has been minimized.

Show comment
Hide comment
@NikhilRadadiya

NikhilRadadiya Sep 8, 2017

@niklasvh Thank you for giving me some insight of what might be wrong with canvas, but if this is the case then my question is why sometimes it generates exact canvas from the elements?

NikhilRadadiya commented Sep 8, 2017

@niklasvh Thank you for giving me some insight of what might be wrong with canvas, but if this is the case then my question is why sometimes it generates exact canvas from the elements?

@NikhilRadadiya

This comment has been minimized.

Show comment
Hide comment
@NikhilRadadiya

NikhilRadadiya Sep 8, 2017

@niklasvh any workaround for the blurry images for now? cause 96 dpi is not enough here, fonts don't look good. certainly not readable enough if I export canvas to pdf

NikhilRadadiya commented Sep 8, 2017

@niklasvh any workaround for the blurry images for now? cause 96 dpi is not enough here, fonts don't look good. certainly not readable enough if I export canvas to pdf

@niklasvh

This comment has been minimized.

Show comment
Hide comment
@niklasvh

niklasvh Sep 8, 2017

Owner

You can try using a higher dpi, but render smaller width/height canvas for example, or split it into multiple different canvases.

Owner

niklasvh commented Sep 8, 2017

You can try using a higher dpi, but render smaller width/height canvas for example, or split it into multiple different canvases.

@NikhilRadadiya

This comment has been minimized.

Show comment
Hide comment
@NikhilRadadiya

NikhilRadadiya Sep 8, 2017

@niklasvh I don't think I can split it to multiple canvases as I have below image like elements,
blurrycanvas

But how can I render smaller width/height canvas with higher dpi? Also If I add dpi:120 canvas
have height=1178 and width=1170, I do n't think that exceeds canvas size?

NikhilRadadiya commented Sep 8, 2017

@niklasvh I don't think I can split it to multiple canvases as I have below image like elements,
blurrycanvas

But how can I render smaller width/height canvas with higher dpi? Also If I add dpi:120 canvas
have height=1178 and width=1170, I do n't think that exceeds canvas size?

@niklasvh

This comment has been minimized.

Show comment
Hide comment
@niklasvh

niklasvh Sep 8, 2017

Owner

What browser/version/OS are you getting the blank canvases with? And is it consistent?

Owner

niklasvh commented Sep 8, 2017

What browser/version/OS are you getting the blank canvases with? And is it consistent?

@NikhilRadadiya

This comment has been minimized.

Show comment
Hide comment
@NikhilRadadiya

NikhilRadadiya Sep 8, 2017

I'm using chrome Version 61.0.3163.79 I get blank canvas only if I use dpi option

NikhilRadadiya commented Sep 8, 2017

I'm using chrome Version 61.0.3163.79 I get blank canvas only if I use dpi option

@eKoopmans

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Sep 17, 2017

Contributor

Hey @NikhilRadadiya, sorry I didn't get back to you. @niklasvh is right, canvases have a max number of pixels and you'll hit that faster with a higher DPI. Is your whole image blank, or just the bottom of it? Can you provide an example (i.e. jsFiddle)?

Contributor

eKoopmans commented Sep 17, 2017

Hey @NikhilRadadiya, sorry I didn't get back to you. @niklasvh is right, canvases have a max number of pixels and you'll hit that faster with a higher DPI. Is your whole image blank, or just the bottom of it? Can you provide an example (i.e. jsFiddle)?

@SevenChan07 SevenChan07 referenced this pull request Sep 30, 2017

Open

js截取网页区域 #10

@yelhouti

This comment has been minimized.

Show comment
Hide comment
@yelhouti

yelhouti Oct 31, 2017

are there any plans to merging this any time soon please?

yelhouti commented Oct 31, 2017

are there any plans to merging this any time soon please?

@xiedandan

This comment has been minimized.

Show comment
Hide comment
@xiedandan

xiedandan Nov 3, 2017

留个记号,
曾经一度改不好 html2canvas 模糊的问题,后来,我只好使用 canvas转换成图片的功能 来模拟截屏~~
下次还有项目的时候,再来试试你们说的 这些

xiedandan commented Nov 3, 2017

留个记号,
曾经一度改不好 html2canvas 模糊的问题,后来,我只好使用 canvas转换成图片的功能 来模拟截屏~~
下次还有项目的时候,再来试试你们说的 这些

@yelhouti

This comment has been minimized.

Show comment
Hide comment
@yelhouti

yelhouti Nov 3, 2017

@niklasvh in your comment of the 6 Aug you say that a fix is available on version 1.0 (dead link), where can I find the fix now please. Also, are you planning to merge this request or not? (just asking), thanks for the great lib

yelhouti commented Nov 3, 2017

@niklasvh in your comment of the 6 Aug you say that a fix is available on version 1.0 (dead link), where can I find the fix now please. Also, are you planning to merge this request or not? (just asking), thanks for the great lib

@niklasvh

This comment has been minimized.

Show comment
Hide comment
@niklasvh

niklasvh Nov 3, 2017

Owner

@yelhouti it's merged into master now. This PR won't be merged as the whole library has been rewritten and it includes this fix/feature already. I'm not closing the PR yet as the 1.0.0 hasn't been released yet, so if someone wants to use this feature they can use the build by eKoopmans.

Owner

niklasvh commented Nov 3, 2017

@yelhouti it's merged into master now. This PR won't be merged as the whole library has been rewritten and it includes this fix/feature already. I'm not closing the PR yet as the 1.0.0 hasn't been released yet, so if someone wants to use this feature they can use the build by eKoopmans.

@eKoopmans

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Dec 6, 2017

Contributor

Scale/DPI looking good in v1.0.0-alpha1, thanks @niklasvh! Closing.

Edit: For future readers, only the scale option was added in, not dpi.

Contributor

eKoopmans commented Dec 6, 2017

Scale/DPI looking good in v1.0.0-alpha1, thanks @niklasvh! Closing.

Edit: For future readers, only the scale option was added in, not dpi.

@eKoopmans eKoopmans closed this Dec 6, 2017

@hailehong

This comment has been minimized.

Show comment
Hide comment
@hailehong

hailehong Dec 23, 2017

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

hailehong commented Dec 23, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Jan 2, 2018

Contributor

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

Contributor

eKoopmans commented Jan 2, 2018

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

This comment has been minimized.

Show comment
Hide comment
@hailehong

hailehong Jan 3, 2018

Yes @eKoopmans , I am using the old version.

Thank you!

hailehong commented Jan 3, 2018

Yes @eKoopmans , I am using the old version.

Thank you!

@eKoopmans

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Jan 3, 2018

Contributor

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

Contributor

eKoopmans commented Jan 3, 2018

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

@hailehong

This comment has been minimized.

Show comment
Hide comment
@hailehong

hailehong Jan 3, 2018

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.

hailehong commented Jan 3, 2018

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

This comment has been minimized.

Show comment
Hide comment
@HarshSaudagar

HarshSaudagar Jan 3, 2018

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.

scale

HarshSaudagar commented Jan 3, 2018

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.

scale

@eggers

This comment has been minimized.

Show comment
Hide comment
@eggers

eggers Jan 3, 2018

@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

eggers commented Jan 3, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@HarshSaudagar

HarshSaudagar Jan 4, 2018

Thanks @eggers ! That solved my issue

HarshSaudagar commented Jan 4, 2018

Thanks @eggers ! That solved my issue

@eKoopmans

This comment has been minimized.

Show comment
Hide comment
@eKoopmans

eKoopmans Jan 26, 2018

Contributor

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

Contributor

eKoopmans commented Jan 26, 2018

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

@codenchips

This comment has been minimized.

Show comment
Hide comment
@codenchips

codenchips Feb 4, 2018

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!

codenchips commented Feb 4, 2018

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

This comment has been minimized.

Show comment
Hide comment
@vishaltatva

vishaltatva Feb 27, 2018

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"

github_html2canvas_dpi

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

vishaltatva commented Feb 27, 2018

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"

github_html2canvas_dpi

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

haydster7 added a commit to haydster7/jsPDF that referenced this pull request Sep 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment