Question

我正在使用html2canvas库从div获取图像。 div包含砌体中的图像集合。所有图像都是300 dpi，但html2canvas产生72 dpi的输出。有什么方法可以保留html2canvas输出中的300 dpi图像质量吗？

＆＃13;

 html2canvas($("#collage-preview-box"), {
                    onrendered: function (canvas) {
                        cartImage = canvas.toDataURL("image/png",1);
                        $("#image-show").attr('src',cartImage);
                        $('.loader').remove();

                    }
                });

<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

<div class="image-part-inner">
   <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>

＆＃13;

Answer 1

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

PDF通常显示为A4肖像。完整的A4页面为8.27×11.69英寸，72 DPI为595×842像素。对于300 DPI，图像分辨率为2482乘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>

然后只需调用html2Canvas即可获取图像

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

如果在A4页面上打印，您的图像为300 DPI。如果在A3页面上打印，DPI将为150 DPI和A5 600 DPI。但决议总是一样的。

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

1 个答案: