从canvas.todataURL转换时如何提高图像的分辨率 [英] How to increase the resolution of the image while converting from canvas.todataURL

问题描述

使用HTML2CANVAS从DIV捕获图像，但是图像质量很差并且是像素.捕获的图像分辨率为96 dpi，如何提高分辨率?

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.

我的代码:

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

我正在使用FileUploader将图像放置在DIV1上方，这是高分辨率图像，但是当html2canvas捕获图像时，图像像素和分辨率将为96dpi.如何将分辨率提高到300 dpi?

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 ?

推荐答案

Windows的标准显示dpi为96 dpi，因此在没有某种形式的放大的情况下进行直接屏幕捕获会产生具有类似dpi的图像，这是有道理的.

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.

html2canvas GitHub存储库上记录了一个功能请求但是该功能自2013年以来就已开放.一种解决方法是先使用 transform:scale(2，2)缩放元素，但这并不理想.

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.

这篇关于从canvas.todataURL转换时如何提高图像的分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！