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

Canvas rendering is blurry on retina displays #390

Closed
adilapapaya opened this issue May 24, 2014 · 38 comments
Closed

Canvas rendering is blurry on retina displays #390

adilapapaya opened this issue May 24, 2014 · 38 comments
Labels

Comments

@adilapapaya
Copy link

Thanks for the great library! One thing I'm noticing though is that the screenshots are blurry when using a retina display. For example, here's what the screenshot of https://github.com/niklasvh/html2canvas looks like on a retina display (as taken from the test page).
screen shot 2014-05-24 at 1 29 51 pm

I think maybe there needs to be a check for the ratio between the window.devicePixelRatio and the context.backingStorePixelRatio somewhere in the rendering of the canvas...?

p.s. Here are some useful links I came across while trying to get to the root of the issue.

@protobi
Copy link

protobi commented Jun 10, 2014

This library is great, but experiencing that as well. I think this is the same issue as #379, #373, #340, #203, #312, and #158 and mentioned in #390.

@manuelpaulo
Copy link

Any updates on this?

@niklasvh niklasvh added the Bug label Sep 18, 2014
@xyxu
Copy link

xyxu commented Oct 26, 2014

#127 fix the blurry

@buildnewapp
Copy link

not fixed

@YPCrumble
Copy link

👍

@btm1
Copy link

btm1 commented Jun 24, 2015

+1 please fix

@hrvolapeter
Copy link

+1 scalling and zooming css styles are not working right ? It could be solved by zooming html taking screenshot and it should look sharper

@breim
Copy link

breim commented Jul 30, 2015

+1 please fix

@alpaca-coco
Copy link

+1 fix

@breim
Copy link

breim commented Aug 29, 2015

@zqcloveping
Bro, try this configs, not solve 100% but increases quality

html2canvas(document.getElementById('flag'), {
useCORS: true,
allowTaint: true,
letterRendering: true,
onrendered: function(canvas) {
var ctx = canvas.getContext('2d');
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
},
});

@alpaca-coco
Copy link

@breim
Bro,3Q for your help.But it seems to be less obvious.Rendering problems in retina devices

@vsesh
Copy link

vsesh commented Sep 29, 2015

Please fix it!

@nicholasaleks
Copy link

+1 please fix

@wangdahoo
Copy link

Plz fix it, Orz

@justiniso
Copy link

+1

@MisterLamb
Copy link

Apparently you can use an existing canvas for rendering (which you can preconfigure to be displayed in retina).

Example:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

@pietersv
Copy link

@MisterLamb Your solution works brilliantly.

This was referenced Apr 11, 2016
@crclayton
Copy link

I also would like this fixed please

@Ben07
Copy link

Ben07 commented May 10, 2016

+1

@AurelienLoyer
Copy link

+1 Fix

@YPCrumble
Copy link

@MisterLamb I'm trying your solution but can't seem to get it working. I've created this fiddle with your fix that doesn't seem to do anything - do you know what I'm doing wrong? You can click the button in the fiddle and allow downloading multiple files to test it and see that they're identical in this implementation.
original
notimproved

@YPCrumble
Copy link

@MisterLamb ah just changed to 0.5.0-alpha1 and works better, thank you. Updated the

@etoah
Copy link

etoah commented Aug 3, 2016

+1

@makc
Copy link

makc commented Nov 5, 2016

@MisterLamb et al, just tried today, and this snippet does no longer work with 0.5.0 b4 - getting empty canvas - and rendered correctly if not using own canvas.

edit: probably my bug, altered fiddle is okay.

edit 2: could not narrow it down, reimplemented like this and now I have something visible but with some offset. perhaps there is a style somewhere that h2c does not fully support and it messes up the result :( lucky me.

edit 3: yes, had to move it up to document.body to get rid of the offset.

@prometeomcclellan
Copy link

@MisterLamb you are a real genius, thanks for sharing ... it saved my day

@VarunSK
Copy link

VarunSK commented Mar 14, 2017

@MisterLamb you are the best 👍

@luxueyan
Copy link

@makc me too! getting empty canvas - and rendered correctly if not using own canvas.

@seanfuture
Copy link

FYI - @eKoopmans solution works well so far in testing: #1087 .. Currently running with it

@niklasvh
Copy link
Owner

Closing in favor of #1087

@shivtumca12
Copy link

@MisterLamb but how to improve the resolution of the image ??
when i am trying to save this image it saved in 96dpi , i need 300+ dpi image . how i can do this ???

@eKoopmans
Copy link
Contributor

@shivtumca12 in the latest release, v1.0.0-alpha.1, you can use the scale option to increase the resolution (scale: 2 will double the resolution from the default 96dpi).

@augustoice
Copy link

augustoice commented Apr 17, 2018

//Faça zoom de 90%, antes de chamar o html2canvas, depois volte o zoom para 100%.

document.body.style.zoom = '99%';
html2canvas(document.querySelector("#content"), {allowTaint:false, widht: _width, height: _height }).then(function (canvas) {

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

@KrishnaPB
Copy link

@MisterLamb The above your solution is worked for texts in the html page. While displaying text it will convert the text in the image brilliantly. But the image content(image) of html page is still displaying with blurr. Please advice me how can correct it.

@alessandrobelli
Copy link

Images are still blurry for me as well.

@bdegley4789
Copy link

window.devicePixelRatio = 2;

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

@saeed670
Copy link

saeed670 commented Apr 30, 2019

Hi, I want to enter the Persian text utf8, but the font fails
How to solve this problem
notimproved (3)

wiht http://jsfiddle.net/o0a8pbwd/1/ codes

@saeed670
Copy link

saeed670 commented May 2, 2019

image

Why does not this picture know?

@towry
Copy link

towry commented Apr 12, 2021

Use img element, do not use div with background-image !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests