如何在从 canvas.todataURL 转换时提高图像的分辨率答案

【问题标题】：How to increase the resolution of the image while converting from canvas.todataURL如何在从 canvas.todataURL 转换时提高图像的分辨率
【发布时间】：2016-05-14 01:54:50
【问题描述】：

图像是使用 HTML2CANVAS 从 DIV 中捕获的，但图像质量很差，而且像素化。拍摄的图像分辨率为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？

【问题讨论】：

标签： javascript asp.net canvas html2canvas

【解决方案1】：

标准的 Windows 显示 dpi 为 96 dpi，因此无需任何形式的放大的直接屏幕捕获将产生具有相似 dpi 的图像是有道理的。

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

【讨论】：

我已经使用了这个功能，它只是按比例切割我的图像。 i.stack.imgur.com/0amrZ.png
发布您遇到问题的 HTML 和 CSS 部分。
我认为 html2canvas 不支持 CSS3 转换。但是您可以使用this answer 来通过html2canvas 实现高分辨率。诀窍是为 html2canvas 提供您自己的画布，并在执行 html2canvas 之前获取 2d 上下文并对其进行缩放。