将div保存为png-html2canvas-质量模糊

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

Answer 1

What does html2canvas is not "actually" taking a screenshot but making representation. So it builds the screenshot

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