shaneparsons shaneparsons -4 years ago 121
CSS Question

Scale image before toDataURL - html2canvas

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


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

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 Source

For anyone else wondering the same thing as I once was, a word of advice is don't expect to get high-res, print-worthy content from html2canvas because you'll just be wasting your time.

PhantomJS is a great alternative, and handles these things a lot better.


Wkhtmltopdf / Wkhtmltoimage are also great alternatives, and are pretty simple to integrate into any web project.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download