javascript - 如何在从 canvas.todataURL 转换时增加图像的分辨率

Question

图像是使用 HTML2CANVAS 从 DIV 中捕获的，但是图像质量很差并且像素化。截取的图片分辨率为96dpi，如何提高分辨率？

有什么办法可以得到高分辨率的高质量图像，请帮帮我。

我的代码:

 <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？

Answer 1

标准的 Windows 显示 dpi 是 96 dpi，因此没有某种形式的放大的直接屏幕捕获将产生具有类似 dpi 的图像是有道理的。

有一个功能请求记录在 html2canvas GitHub repository对于这种类型的功能，它自 2013 年以来一直开放。一种解决方法是首先使用 transform: scale(2, 2) 缩放元素，但这并不理想。