How to increase the resolution of the image while converting from canvas.todataURL

问题

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 ?

回答1:

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.

来源：https://stackoverflow.com/questions/35201271/how-to-increase-the-resolution-of-the-image-while-converting-from-canvas-todatau