1

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.

flacoding
  • 145
  • 1
  • 12

1 Answers1

2

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);
Kelv.Gonzales
  • 558
  • 4
  • 13
  • Tried that solution and now I get a black box 400x400 on the ipad instead of a white one. Same bad quality on a laptop. It seems like the "canvas" parameter on the onrendered function is already on a low quality resolution, so if we set it to 1 it is still the same bad quality. – flacoding Oct 13 '15 at 22:28
  • it seems that html2canvas gives blurry images. http://stackoverflow.com/questions/22803825/html2canvas-generates-blurry-images/22819006#22819006 . Try rasterizeHTML.js as an alternate? – Kelv.Gonzales Oct 13 '15 at 23:15
  • I don't think this one will work because I'm trying to get print screen of a DIV. Inside the div I have 2 IMG (one .png and the other one is a base64) and a string on top of each other. – flacoding Oct 14 '15 at 00:23
  • The default value for `canvas.toDataURL()` is `"image/png"` which has no quality parameter (always best). – Kaiido Oct 14 '15 at 00:53