Blurry image fix

Recently had an issue with images exporting and looking incredibly blurry.

Looking at the html2canvas logs I saw the x position and crop position were returning as 174.5. This half a pixel was causing the images to render with an excessive amount of blur.

To force this to stop (as I couldn’t think of a reason this would be the desired outcome) I have added Math.floor() to the top, bottom, right, left positions. (I did not have any issues with width and height.).

    function getBounds (node) {
        if (node.getBoundingClientRect) {
            var clientRect = node.getBoundingClientRect();
            var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
            return {
                top   : Math.floor(clientRect.top),
                bottom: Math.floor(clientRect.bottom || (clientRect.top + clientRect.height)),
                right : Math.floor(clientRect.left + width),
                left  : Math.floor(clientRect.left),
                width : width,
                height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
            };
        }
        return {};
    }

[CKGrafico]

And after two years they don’t have found anything better ?? 👏

[benzara-tahar]

I used this and it fixed the issue html2canvas(domElement, { scale: 2 });