Html5 canvas 使用htm2canvas后保留图像的原始质量

我正在使用库从一个div中获取图像。该div包含图像的集合。所有图像均为300 dpi，但html2canvas的输出为72 dpi。 有什么方法可以在html2canvas的输出中保持300 dpi的图像质量

html2canvas（$（“#拼贴预览框”）{
onrendered：函数（画布）{
cartImage=canvas.toDataURL（“image/png”，1）；
$（“#图像显示”）.attr（'src'，cartImage）；
$（'.loader'）.remove（）；
}
});

---

DPI用于打印。图像具有分辨率，其DPI取决于打印图像的大小。要获得以所需DPI打印的正确分辨率图像，您必须知道打印的大小

PDF通常以A4格式显示。一张完整的A4纸是8.27×11.69英寸，72 DPI时是595×842像素。对于300 DPI，图像分辨率为2482 x 3508

设置html2Canvas图像的大小很容易

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  },
  width: 2482,
  height: 3508
});

这将导致在A4纸张上打印时的图像为300DPI

问题是您需要增加页面大小以适应该图像

只需创建一个宽度和高度设置为2482×3508的容器元素。以适合大格式的正确大小将图像和其他内容添加到该元素中

<div class="image-part-inner" style='width:2482px;height:3508px'>
   <div id="collage-preview-box" style="position: relative; height: 366.7px;">
      <div class="grid-sizer"></div>
      <div class="grid-item" style="position: absolute; left: 0%; top: 0px;"><img class="imgcol convert-img" data-effect="" src="http://localhost/luxe-wall/wp-content/themes/luxe_walls/vendor/fineuploader/php-traditional-server/files/733705f4-15af-4dc0-a7ab-7d497a540c8e/file.jpg"></div>
      <div class="grid-item" style="position: absolute; left: 33.3333%; top: 0px;"><img class="imgcol convert-img" data-effect="" src="http://localhost/luxe-wall/wp-content/themes/luxe_walls/vendor/fineuploader/php-traditional-server/files/5d310f47-38ba-43ab-8e68-fbed9493a053/file.jpg"></div>
      <div class="grid-item" style="position: absolute; left: 66.6667%; top: 0px;"><img class="imgcol convert-img" data-effect="" src="http://localhost/luxe-wall/wp-content/themes/luxe_walls/vendor/fineuploader/php-traditional-server/files/9810a0f1-63a1-46f0-91fd-5e28d6c0d943/file.jpg"></div>
      <div class="grid-item" style="position: absolute; left: 0%; top: 183px;"><img class="imgcol convert-img" data-effect="" src="http://localhost/luxe-wall/wp-content/themes/luxe_walls/vendor/fineuploader/php-traditional-server/files/d73075cf-ef6d-4c9f-8f72-3f63bbde50b4/file.jpg"></div>
   </div>
</div>

---

如果打印在A4纸上，图像的分辨率为300 DPI。如果打印在A3页面上，则DPI将为150 DPI，A5为600 DPI。但是分辨率总是一样的。

图书馆会截取一个网页的屏幕，对吗？在这种情况下，它只需按屏幕上看到的大小拍摄图像，就可以得到一张屏幕截图。它不通过url检索任何图像。顺便说一句，我不明白为什么仅仅获取图像url不更容易？@DmitrySenkovich用户已经在布局中设置了这些图像，如砖石或图像网格，需要捕获并转换为PDF进行打印。如果有其他解决方法，建议我实现这一目标？当然，总会有解决方法。你能给我提供一个这个砖石的页面样本吗？我可能会给你写一个精确的解决方案，代码。下面是我的图像编辑器的示例图像和截图后的最终预览，这是将div从第一个图像转换为画布后生成的72 dpi图像。我指的是一个页面的html代码。感谢@Blindman67的解决方案。事实上，我需要这个转换成PDF格式的图像，并将其发送到墙纸打印。这是可行的，但有两个问题1）我需要在浏览器中显示图像网格的预览，这在这种大小下是不可能的；2）当我尝试从这种大小创建PDF时，浏览器没有响应。@Saw.Rov您可以将预览的画布样式宽度和高度设置为您需要的任何大小。例如

onrendered:function（canvas）{canvas.style.width='1024px'；canvas.style.height='840px'；…

然后添加预览。不要使用

canvas.toDataURL

只需显示画布，画布是一个HTMLImage元素，与元素类似，因此无需创建巨大且非常浪费的dataURL（超过50%的dataURL位未被使用，只需占用RAM，再加上图像的像素缓冲区，将使大多数浏览器变得迟钝）感谢您的帮助，一切正常。但有一个问题，我制作了一个大帧，样式为：宽度：2482px；高度：3508px（此为隐藏）并保留较小的一个供用户预览。但html2canvas仅从大框架中捕获窗口中可见的部分。是否有任何方法可以让我获得完整的大框架而不被画布截断？

html2canvas(".image-part-inner", {
  onrendered: function(canvas) {
     // do whatever you do with the image.
  },
  width: 2482,
  height: 3508
});