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!

Answer 1

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

Answer 2

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.