4

I am using html2canvas plugin to convert div element to image.

https://github.com/niklasvh/html2canvas

html2canvas($("#captureDiv"),{
    background :'#FFFFFF',
    onrendered: function(canvas) {
       document.getElementById("canvasHolder").appendChild(canvas);
       var imgsrc = canvas.toDataURL("image/png");
       $("#image").attr('src',imgsrc);
    }
});

It works but the generated image is little blurry. Here is the screenshot.

enter image description here

Is there any solution for this? Thanks.

Mohan
  • 398
  • 7
  • 24
  • 1
    Can you create a working fiddle/codepen/plunker of your code? Because this information is not sufficient. – Vikasdeep Singh Apr 05 '18 at 06:23
  • What is the actual size of the image? If the image is rendered larger or shorter, it will be blurry, I guess. If the image is a vector image than it will be okay, no blur on it. – DiabloSteve Apr 05 '18 at 06:55
  • That's an harsh topic, already discussed here many times which comes down to the fact that fonts are rendered at a sub-pixel level, while canvas doesn't have access to this sub-pixel level. You can see [here](https://i.stack.imgur.com/WO458.png) how the rendered graphic includes colored values, this is to take advantage of how a [physical pixel is built](https://en.wikipedia.org/wiki/Pixel#/media/File:Closeup_of_pixels.JPG). Now [here is](https://i.stack.imgur.com/9K1xT.png) how the canvas (used by html2canvas) renders this font. As you can see, only antialias at pixel level is being applied. – Kaiido Apr 05 '18 at 07:16
  • Actually, [there seems to be a way by initiating the context with alpha: false option](https://stackoverflow.com/a/28161474/3702797). But h2c doesn't seem to have this option... So the only workaround would be to pass an already intiated canvas (`canvas.getContext('2d', {alpha:false}); html2canvas(elem, {canvas: canvas})` but that means we would have to size it ourselves. So an even better idea would be to propose a FR to h2c so that niklavsh allow this as an option. – Kaiido Apr 05 '18 at 08:24

0 Answers0