Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blurry image fix #576

Closed
graham73may opened this issue Apr 23, 2015 · 25 comments

Comments

@graham73may
Copy link

commented Apr 23, 2015

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 {};
    }
@usmonster

This comment has been minimized.

Copy link
Contributor

commented Apr 30, 2015

On what browser(s) were you experiencing the blur? It may be related to canvas antialiasing (#171, #206, #158, et al.).

Rounding here is more of a workaround than a fix as it may cause other issues, since bounds should support subpixel values. Some better workarounds might be found here: http://stackoverflow.com/q/195262 .

@graham73may

This comment has been minimized.

Copy link
Author

commented Apr 30, 2015

The blur caused by the decimal points made the images unusable, for us it was a case of floor the values or disable any kind of export functionality.

Is there somewhere more suitable to implement a fix?

@simogeo

This comment has been minimized.

Copy link

commented Jun 16, 2015

Same problem here with Firefox 38.0. Images are just perfects with Chrome 18.0.102

@rusllonrails

This comment has been minimized.

Copy link

commented Nov 8, 2015

@graham73may many thanks man. 🍻
Your fix works as a briliant 👍
I spent about 2 days in order to fix this in Firefox.
I'm happy that found your post. 🎉

@zzolo

This comment has been minimized.

Copy link

commented Dec 11, 2015

This worked for my issue (which was not a retina related issue).

It would be nice to be able to have this as an option, or if it can be pinned down to specific browsers some specific checks.

@seemasingh123

This comment has been minimized.

Copy link

commented Feb 25, 2017

<script type="text/javascript"> $(function(){ $('#PDFTABLE11').mouseover(function(){ div_content = document.querySelector("#container2") html2canvas(div_content).then(function(canvas) { data = canvas.toDataURL('image/png?'); save_img(data); }); }); }); function save_img(data){ $.post('save_jpg.php', {data: data}, function(res){ if(res != ''){ if(yes){ location.href =phe.php; } } else{ alert('something wrong'); } }); } </script>

image

@seemasingh123

This comment has been minimized.

Copy link

commented Feb 25, 2017

please help me, what should do?
here is the another code of file save_jpg.php.

@graham73may

This comment has been minimized.

Copy link
Author

commented Feb 25, 2017

@seemasingh123 how is this related to my original issue? Not sure this is the right place for this.

@seemasingh123

This comment has been minimized.

Copy link

commented Feb 25, 2017

what is your original issue sir?? is it not related to blurry image?

@graham73may

This comment has been minimized.

Copy link
Author

commented Feb 25, 2017

I've no idea what it's related to because all you've put is a screenshot, some code and said "please help".

@hoangtuan438

This comment has been minimized.

Copy link

commented Mar 28, 2017

@graham73may Thank you so much. My issue was solved
👍

@FlorianLeitgeb

This comment has been minimized.

Copy link

commented May 16, 2017

I am also experiencing blurry images with IE, but in Chrome it is working perfectly. How do I use this with my following code?

html2canvas(document.getElementById("statusGeneralInfo"), {
            onrendered: function (canvas) {
                var imgData = canvas.toDataURL(
                    'image/png');
                var doc = new jsPDF("p", "mm", "a4");
                doc.deletePage(1);
                doc.addPage(250, 300);
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('WebSiteScreen.pdf');
            }
});
@graham73may

This comment has been minimized.

Copy link
Author

commented May 16, 2017

@FlorianLeitgeb The code block in my original post is a modification to html2canvas. If you want to try my fix you need to modify html2canvas's code, not your own.

@FlorianLeitgeb

This comment has been minimized.

Copy link

commented May 16, 2017

Big thank you. It is working like a charm!

@CKGrafico

This comment has been minimized.

Copy link

commented Jun 28, 2017

Okey this simply works. Where is the PR? html2canvas should fix that.

CKGrafico added a commit to CKGrafico/html2canvas that referenced this issue Jun 28, 2017

Fix blurry images
Fix niklasvh#576 from @graham73may that never did the PR, don't know why.
@graham73may

This comment has been minimized.

Copy link
Author

commented Jun 28, 2017

@CKGrafico This was not PR'd as one of the html2canvas contributors sees this as a workaround and not a proper solution. - #576 (comment)

@CKGrafico

This comment has been minimized.

Copy link

commented Jun 28, 2017

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

@Khemendra

This comment has been minimized.

Copy link

commented Jul 20, 2017

RESOLVED :)
Please use below code:

onrendered: function (canvas) {
setpixelated(canvas.getContext('2d')); // For More Clear Images in all browsers
.......

function setpixelated(context) {
context['imageSmoothingEnabled'] = false; /* standard /
context['mozImageSmoothingEnabled'] = false; /
Firefox /
context['oImageSmoothingEnabled'] = false; /
Opera /
context['webkitImageSmoothingEnabled'] = false; /
Safari /
context['msImageSmoothingEnabled'] = false; /
IE */
}

@CKGrafico

This comment has been minimized.

Copy link

commented Jul 24, 2017

@Khemendra can you add this to the PR? #1153

@NoLdman

This comment has been minimized.

Copy link

commented Sep 28, 2017

Why was @graham73may problem discarded? - The floating point issue is valid. It occurs in Chrome (but not Firefox) and has nothing to do with image-smoothing.

To elaborate: It occurs when the bounding rectangle not only has floating-points in height/width, but also has floating-points in x and y. (BTW: I'm not sure if that is a bug of Chrome itself...)

(For the time being i worked around by position my html-element fixed, while the canvas is generated.)

@niklasvh

This comment has been minimized.

Copy link
Owner

commented Sep 28, 2017

@NoLdman are you experiencing the issue with 1.0.0 as well?

@NoLdman

This comment has been minimized.

Copy link

commented Sep 28, 2017

@niklasvh are you referring to 5dbb197? - Since there is no official release yet, I built that commit with webpack myself. Unfortunately, I'm getting a bunch of errors with that built, e.g. Unable to load image Failed to fetch image with status code 404.
I think that has something to do with the fact that I'm using html2canvas within the shadow-dom (a Polymer app), but this needs further investigation and most likely it's own issue ticket.

leomontenegro6 added a commit to leomontenegro6/aaig that referenced this issue Oct 30, 2017

@niklasvh

This comment has been minimized.

Copy link
Owner

commented Dec 12, 2017

Releases are available on npm and https://github.com/niklasvh/html2canvas/releases now

@niklasvh niklasvh closed this Dec 12, 2017

@bdegley4789

This comment has been minimized.

Copy link

commented Apr 12, 2019

window.devicePixelRatio = 2;

I put this before I did html2canvas and it worked for me

@MianZaid

This comment has been minimized.

Copy link

commented Jun 4, 2019

Here is the complete js file after replacing @graham73may function.
html2canvas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.