htm2canvasを使用した後も元の画質を維持します

Question

私はhtml2canvasライブラリを使用してdivから画像を取得しています。 divには、石積みの画像のコレクションが含まれています。すべての画像は300dpiですが、html2canvasは72dpiで出力します。 html2canvasの出力に300 dpiの画質を保持できる方法はありますか？

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>

Answer 1

DPIは印刷用です。画像には解像度があり、DPIはプリントするかどうかによって決まります。所望のDPIで印刷するための正しい解像度の画像を得るためには、プリントのサイズを知っていなければならない。

通常、PDFはA4の肖像画として表示されます。フルA4ページは8.27×11.69インチで、72 DPIで595×842ピクセルです。 300 DPI画像の解像度が3508

によって2482であることがhtml2Canvas画像A4用紙に印刷した場合300DPIである画像をもたらす

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

のサイズを設定することは容易です。

問題は、画像に合わせてページサイズを大きくする必要があることです。

幅と高さを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(".image-part-inner", { 
    onrendered: function(canvas) { 
    // do whatever you do with the image. 
    }, 
    width: 2482, 
    height: 3508 
}); 

を取得するためにhtml2Canvasを呼び出しそして、あなたはA4ページに印刷された場合に300 DPIであるイメージを持っています。 A3ページに印刷された場合、DPIは150 DPI、A5 600 DPIになります。しかし、決議は常に同じです。