After grabbing an image from a DIV with HTML2CANVAS, I noticed that the image quality is disappointingly poor and pixelated. The resolution of the captured image is only 96 dpi. Is there a way to boost the resolution for a clearer, high-quality image?
Could someone please provide assistance on achieving a good quality image with a higher resolution?
This is the code snippet I am using:
<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);
}
});
I am uploading a high-resolution image above DIV1 using FileUploader. However, when html2canvas captures the image, it becomes pixelated and stuck at 96 dpi resolution. Is there a method to increase the resolution to 300 dpi?