HTML2canvas generates Blurry images

Question

I am using jsPDF and it uses html2canvas to generate an image from some html element and insert on the .pdf file. But there is a problem on html2canvas, it generates blurry

Answer 1

solution is very simple, after X hours of testing.

Set your ALL div's 2x higher, your IMG 2x higher, and finally set html zoom on 0.5, or if you want better quality yet, set 3x higher (in this case the html zoom must be 0.33) or more, (the original image sizes are assumed to be larger).

For example:

HTML

CSS before

body {
    background: #b2b2b2;
}
.pdf {
   background: #fff;
   /* A4 size */
   width: 842px;
   height: 595px;
 }
img {
   width: 300px;
   height: 200px;
}

CSS after (only changes)

html {
   zoom: 0.5;
}

.pdf {
   /* A4 size before . 2 */
   width: 1684; 
   height: 1190px; 
 }
img { /* size before . 2 */
   width: 600px;
   height: 400px;
}

AND here is my result:

PDF before PDF after