Scale image before toDataURL - html2canvas

Question

Before you tell me this is a duplicate question, know that I've searched through every single similar question and none of the answers in any of them are working for me.

Im using html2canvas to grab a snapshot of a div, and what I need to do is scale it up to 750x1050 before saving it to a png via canvas.toDataURL().

The closest I got was with the following code.

html2canvas(document.getElementById('div_id'), {
   onrendered: function(canvas) {

      var extra_canvas = document.createElement("canvas");

        extra_canvas.setAttribute('width', 750);
        extra_canvas.setAttribute('height', 1050);

        var ctx = extra_canvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, 750, 1050);
        var dataURL = extra_canvas.toDataURL();

        window.open(dataURL);
   }
});

The image was sized properly but the text within the image was extremely poor quality, as if it resized it after becoming a png.

Is it that I'm doing something wrong or can you just not scale up this way?

Any and every suggestion/work-around will be greatly appreciated!

Solution 1

For anyone else wondering how to get high-res print-worthy content from html: PhantomJS and wkhtmltopdf / wkhtmltoimage are great alternatives that handle these things better.

Solution 2

I had bit similar problem and this is what I ended up doing

html2canvas($('#div_id'), {width: 750, height: 1050}).then(
    function(canvas) {
       window.open(canvas.toDataURL("image/png"));
    }
)

Now this still lead to blurry images (especially with text), but that was because my default zoom on browser was set to 110% those causing the window.devicePixelRatio to be 1.1000... I sorted that out by simply showing warning for user (worked for the purpose I need it), but apparently there is a better way to solve it https://stackoverflow.com/a/22819006/460586

Comments

[Lee Comstock]

It seems to me like these alternatives don't work for dynamic web content where the DOM has changed after page load, is that right? PhantomJS seems to work by giving it an URL, and Wkhtmltopdf seems to work by giving it an HTML file or URL, as opposed to creating an image based on the current state of a web application. Correct me if I'm wrong.

[shaneparsons]

I was able to able to use wkhtmltopdf with a page dynamically created from php, html and javascript. The page was specifically built for the pdf though, so it happened in the background and wasn't shown to the user. Maybe you could try something along the lines?

[shaneparsons]

Essentially re-create what you want printed to pdf on a page in the background.