HTML2Canvas blank image on iPad and very low quality images on laptops

Question

Here is my code:

html2canvas($("#divImage"), {
        onrendered: function(canvas) {  
            console.log ("w: " + canvas.width + "h: " + canvas.height);  
            window.open(canvas.toDataURL()); 
        }
});  

This code gives me a very low resolution image using a laptop (chrome or safari) and gives me a blank image on the iPad. The height and width that comes back in the console is 400x400px which is the size displayed on the page. The image it self has 1000x1000px. I've looked around and found some posts about it but none of had a solution. Thanks.

Answer 1

Have you tried setting its quality?

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);