save div as png - html2canvas - blurry quality

Question

Using html2canvas i'm trying to capture a div and save it as a .png file, and it works!

(just using window.open in example to simplify it - same quality problem)

However the image sharpness / quality of the images inside the targeted div is pretty bad. I'm not quite sure how to improve the image quality/sharpness. Any suggestions ?

saveAsPNG function:

saveAsPNG = function(id) {
var target = document.getElementById(id);

  html2canvas(target, {
    onrendered: function(canvas) {
      var data = canvas.toDataURL("image/png", 1);
      window.open(data);     
    }
  });
};

First of all, `image/png` is useless because it's the default value for `toDataURL`. And the `encoderOptions` (2nd parameter) is only used for `image/jpeg` and `image/webp`. It does not solve the problem but it "corrects" the code. — ADreNaLiNe-DJ, Mar 23 '16 at 10:42
I added this line `document.body.appendChild(canvas);` before the on with `toDataURL`. And the canvas rendering is blurry also. So it comes from html2canvas and there's not option in it to improve quality. — ADreNaLiNe-DJ, Mar 23 '16 at 10:54
Also, I found this answer: http://stackoverflow.com/a/31726736/5119765 — ADreNaLiNe-DJ, Mar 23 '16 at 11:00

score 0 · Answer 1 · answered Mar 23 '16 at 13:09

What does html2canvas is not "actually" taking a screenshot but making representation. So it builds the screenshot based on the information available on the page.

Maybe an option not to take blurry images is to use it.

https://github.com/ivoviz/feedback

This is a jQuery plugin based on html2canvas, which allows you to take screenshots to a certain part of the page. Give it a try :)

save div as png - html2canvas - blurry quality

1 Answers1