Html2Canvas Generates Blurry Images

HTML2canvas generates Blurry images

I have found out my problem. Happens that my screen is a Retina Display, so when the canvas2html will render the HTML, due to the difference of pixel density on retina screen, the image is rendered blurred.

Found out the solution here:

https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html

html2canvas capturing low quality picture

Ok i did it because of the similar question asked by someone else in this link but the answer wasn't marked correct because he didn't explained it right maybe. Anyway here is the solution.

 var myimage;

    function print() {
        window.scrollTo(0, 0);
        html2canvas(document.getElementById('shirtDiv')[0],{scale:4}).then(function(canvas) {

        myimage = canvas.toDataURL("image/jpeg");

            var doc = new jsPDF();
            doc.addImage(myimage, 'JPEG', 35, 20, 130, 155);
            doc.save('Test.pdf');
        });
    }

The scale property was mentioned everywhere but i was having trouble to apply it. yes i know i am stupid but maybe someone else is like me and this might help them :)

UPDATE VERSION

This HTML2CANVAS solution was still not working good for me because the scale option does increase the target div's size before capturing it but it won't work if you have something inside that div which won't resize e.g in my case it was canvas for my editing tool. Anyway for this i opted for domtoimage and trust me i think that this is the best solution of them all. I didn't had to face any problem of html2canvas for example: need to be at the top of webpage so html2canvas can capture the shot completely and Low dpi problem

Anyway sorry for the story but i thought everyone should know and here is the code

function print() {
var node = document.getElementById('shirtDiv');
var options = {
    quality: 0.95
};

domtoimage.toJpeg(node, options).then(function (dataUrl) {


    var doc = new jsPDF();
    doc.addImage(dataUrl, 'JPEG', -18, 20, 240, 134.12);
    doc.save('Test.pdf');
});
}

Cdn for dom to image: https://cdnjs.com/libraries/dom-to-image

Cdn for jspdf: https://cdnjs.com/libraries/jspdf

Related Topics