Html2canvas: Render with higer image resolution.

[nouknouk]

Hi,

just wondered to know if there is a way to render a DOM tree in an higher resolution than the actual size of the DOM element themselves.

Let's say I have a div with some text in it:

<div style='width: 100px; height: 100px; border: 1px solid; font-size:12px;'>
some text
</div>

When I do a rendering of this div, the canvas returned will have a size of 100x100 pixels.
If I display a zoomed version of this canvas (for example because the end user uses a zoom factor > 1 in its browser ; because of HiDPI display ; ...) , the result will look pixelized, especially the text.

==> Is there a way to tell html2canvas to render a 'zoomed version' of the same div in a canvas of, let's say 400x400 pixels; the text rendered would have a size of 48px (instead of 12px), the border 4px (instead of 1px), etc...

Note: I saw { width, height } parameters in the options, but obviously it's goal is not to apply a 'zoom' factor, rather to define a canvas size in which the 'un-zoomed' rendering will apply.

Many thanks in advance for your answers & advices.

[yonatanmn]

The only way we solved a similar problem was to enlarge canvas, (hide body, timeout, show body -> forces the DOM to re-render), render html2canvas, and then bring back normal size.
this might cause a blink - depending on your app requirements it might be a reasonable solution.

[mathiasleroy]

Something like this ?

    .x2{
        transform: scale(2,2);
    }

    JS
    $('#dygraph1').addClass('x2');

    $('body').hide();
    setTimeout(
        function() {
            $('body').show();
            html2canvas($('#dygraph1'), {
                onrendered: function(canvas) {
                    var myImage = canvas.toDataURL();
                    window.open(myImage);
                }
            });
            $('#dygraph1').removeClass('x2');
        }, 500
    );

[yonatanmn]

Not with scale. You need real enlargement.
I did it with rem sizes and enlarging body.fontSize, but you can just set canvas to twice the size

[mathiasleroy]

Like this ?

    #dygraph1{
        width:100%;
        height:300px;
    }
    .x2{
        width:200%;
        height:600px;
    }

[yonatanmn]

I guess it should work

[mathiasleroy]

It didn't work
getting rid of css worked however

    // $('#dygraph1').addClass('x2');
    $('#dygraph1').width('200%').height('600px');

Then there still remains to change font sizes wich doesn't seem simple because it's forced in many div's style="...;font-size:14px;...".

[yonatanmn]

Try working with em.
in img.wrapper set font size to 14
and set img size to x em, and font sizes to y em.
Then change wrapper font size to 28,
And every thing will get doubled

[AdamEdmonds]

@yonatanmn Is there anyway you could provide a simple jsfiddle to illustrate your suggestion?

[cristian-dan]

@yonatanmn I would like a jsfiddle too, please

[yonatanmn]

@AdamEdmonds @cristian-dan , can't get html2canvas to work inside jsfiddle, and I don't have time to solve that now.
If you'll provide basic example I can add my code to it

[cristian-dan]

@yonatanmn
here is a working html2canvas: http://jsfiddle.net/cristiandan/4kdLfooj/
this is what I was trying but it's not working: http://jsfiddle.net/cristiandan/vdch4d3d/

[yonatanmn]

@cristian-dan , you are working with canvas, you don't need html2canvas if your html is already canvas!

the meaning of this library is to take regular DOM elements and draw them inside canvas as vector elements. In your case you can just draw another canvas after multiplying with JS all the relevant variables

[cristian-dan]

@yonatanmn yea, but could you show me how to multiply and scale them in the canvas to get better quality?
The thing is that I'm converting, in my app, html to canvas and then I want to get a high quality image from that canvas. But the image I get is very blurred. And I want to see on this example just how to scale the objects in the canvas to get better quality.

[yonatanmn]

@AdamEdmonds : HIGH RESOLUTION EXAMPLE

and @cristian-dan - just redraw another canvas, with doubled numbers, and use - canvas.toDataUrl().
If you want to make an image from canvas - don't use html2canvas!

[AdamEdmonds]

@yonatanmn Thank you for the High-Res example. That cleared things up for me.

[niklasvh]

Fixed in 1.0.0

[shakercs]

you can use https://github.com/cburgmer/rasterizeHTML.js instead of html2canvas