2

The image is captured from a DIV using HTML2CANVAS, but the image quality is very poor and it pixalets. The captured image resolution is 96 dpi, how to increase the resolution ?

Is there any way to get a good quality image with high resolution, please help me out.

My Code :

 <div style="border-style: solid; height: 15cm; width: 15cm; border-radius:25px; 
             position: relative; top: 1px;" id="DIV1">

var element = $("#DIV1");

html2canvas(element, {
  useCORS: true,
  onrendered: function (canvas) {

        var dataURL = canvas.toDataURL("image/png");
        window.open(dataURL);
      }
   });

I am placing the image above the DIV1 using FileUploader which is a high resolution image, but when html2canvas captures the image, the image pixalets and resolution will be 96dpi. How to increase the resolution to 300 dpi ?

Anoop B.K
  • 1,484
  • 2
  • 17
  • 31

1 Answers1

2

The standard Windows display dpi is 96 dpi so it makes sense that a straight screen capture without some form of up-scaling will result in an image with a similar dpi.

There is a feature request logged at the html2canvas GitHub repository for exactly this type of capability however it has been open since 2013. One workaround is to first scale the element using transform: scale(2, 2) however it's not ideal.

  • i have used this feature, it just cut my image proportionally. http://i.stack.imgur.com/0amrZ.png – Anoop B.K Feb 24 '16 at 06:35
  • Post the parts of the HTML and CSS you are having trouble with. –  Feb 24 '16 at 06:53
  • I don't think CSS3 transforms are supported by html2canvas. But you can use [this answer](http://stackoverflow.com/a/36858051/1009901) to achieve high resolution with html2canvas. The trick is to provide your own canvas to html2canvas, and get 2d context and scale that before doing html2canvas. – Yeti Oct 05 '16 at 09:44