CODEWITHSUNDEEP
html5-canvashtml2canvas
Saw.Rov
Saw.Rov

Reputation: 31

Retain the original quality of image after using htm2canvas

I am using html2canvas library to get image from a div. The div contains collection of image in masonry. All the images are in 300 dpi but the html2canvas produces output in 72 dpi. Is there any way I can retain the 300 dpi image quality in the output from html2canvas?

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

Upvotes: 0

Views: 1625

Answers (1)

Blindman67
Blindman67

Reputation: 54109

DPI is for print. Images have resolution, their DPI depends on how large or small you print them. To get an image of the correct resolution to print at a desired DPI you must know what size the print will be.

A PDF is typically presented as A4 portrait. A full A4 page is 8.27 × 11.69 inches which at 72 DPI is 595 by 842 pixels. For 300 DPI the image resolution is 2482 by 3508.

It is easy to set the size of the html2Canvas image 

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

Which will result in an image that is 300DPI when printed on a A4 sheet.

The problem is you need to increase the page size to fit that image.

Just create a container element with the width and height set 2482 by 3508. Add the images and what not to that element at the correct size to fit the large format.

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

Then just call html2Canvas to get the image

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

And you have an image that is 300 DPI if printed on an A4 page. If printed on a A3 page the DPI will be 150 DPI and on a A5 600 DPI. But the resolution will always be the same.

Upvotes: 1

Related Questions