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!

PS: The div I'm capturing an snapshot of is a content-editable div with a background colour and html text within. — shaneparsons, Feb 20 '15 at 17:55

score 5 · Answer 1 · edited May 23 '17 at 12:09

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

shaneparsons · Accepted Answer · 2018-02-22T16:23:18.267

3

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.

edited Feb 22 '18 at 16:23

answered Jul 30 '15 at 14:35

shaneparsons

1,489
1
20
24

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. – Lee Comstock Jan 23 '18 at 10:18
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 Jan 23 '18 at 14:45
Essentially re-create what you want printed to pdf on a page in the background. – shaneparsons Jan 23 '18 at 14:47

score 0 · Answer 3 · answered Feb 23 '18 at 10:19

Even my images were coming pixelized and sometimes cramped when there was lot of content to fit within a pre-set width and height. After hours of searching, found a good solution from this post. It takes care of maintaining resolution to good extent even on zooming and no visible pixelization.

html2canvas(document.getElementById('div_id'), {
onrendered: function(canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        var myImage = canvas.toDataURL("image/jpeg,1.0");  
       }
 });

Scale image before toDataURL - html2canvas

3 Answers3

Linked