iPad上的HTML2Canvas空白图像和笔记本电脑上的低质量图像

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