Question

使用HTML2CANVAS从DIV捕获图像，但图像质量非常差并且它是pixalets。捕获的图像分辨率为96 dpi，如何提高分辨率？

有没有办法获得高分辨率的高质量图像，请帮帮我。

我的代码：

 <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)扩展元素，但这并不理想。

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

1 个答案: