Html2canvas: 视网膜显示上的画布渲染模糊

创建于 2014-05-24 · 37评论 · 资料来源: niklasvh/html2canvas

谢谢你的图书馆！我要注意的一件事是，使用视网膜显示器时屏幕截图模糊。例如，这是https://github.com/niklasvh/html2canvas的屏幕截图在视网膜显示屏上的样子（从测试页截取）。
screen shot 2014-05-24 at 1 29 51 pm

我认为也许需要检查画布渲染中某处window.devicePixelRatio和context.backingStorePixelRatio之间的比率...？

ps这是我试图弄清问题根源时遇到的一些有用链接。

Bug

资料来源

adilapapaya

最有用的评论

显然，您可以使用现有的画布进行渲染（可以将其预先配置为在视网膜中显示）。

例：

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
});

MisterLamb 于 2016-04-10

👍34 😄6 ❤3

所有37条评论

这个库很棒，但是也有经验。我认为这与＃379，＃373，＃340，＃203，＃312和＃158和＃390中提到的问题相同。

protobi 于 2014-06-10

有任何更新吗？

manuelpaulo 于 2014-09-18

https://github.com/niklasvh/html2canvas/pull/127修复模糊

xyxu 于 2014-10-26

不固定

syxchina 于 2015-06-09

：+1：

YPCrumble 于 2015-06-24

+1请修正

btm1 于 2015-06-24

+1缩放和缩放CSS样式不起作用吗？可以通过缩放html截屏来解决，它应该看起来更清晰

hrvolapeter 于 2015-07-01

+1请修正

breim 于 2015-07-30

+1修复

zqcloveping 于 2015-08-29

@zqcloveping
兄弟，尝试此配置，不能解决100％的问题，但可以提高质量

html2canvas（document.getElementById（'flag'），{
useCORS：是的，
allowTaint：是的，
letterRendering：true，
渲染：function（canvas）{
var ctx = canvas.getContext（'2d'）;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
}，
}）;

breim 于 2015-08-29

👍4

@breim
兄弟，第3季为您提供帮助。但这似乎不太明显。视网膜设备出现渲染问题

zqcloveping 于 2015-08-31

请修复它！

vsesh 于 2015-09-29

+1请修正

nicholasaleks 于 2015-11-02

请修复它，Orz

wangdahoo 于 2016-02-03

justiniso 于 2016-04-06

显然，您可以使用现有的画布进行渲染（可以将其预先配置为在视网膜中显示）。

例：

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
});

MisterLamb 于 2016-04-10

👍34 😄6 ❤3

@MisterLamb您的解决方案非常出色。

pietersv 于 2016-04-11

我也想要这个固定的

crclayton 于 2016-04-26

Ben07 于 2016-05-10

+1修复

T3kstiil3 于 2016-06-10

@MisterLamb我正在尝试您的解决方案，但似乎无法正常工作。我用您的修复程序创建了这个小提琴，它似乎什么也没做-您知道我做错了吗？您可以单击小提琴中的按钮，并允许下载多个文件以对其进行测试，然后查看它们在此实现中是否相同。
original
notimproved

YPCrumble 于 2016-06-14

@MisterLamb啊刚刚更改为0.5.0-alpha1，效果更好，谢谢。更新了

YPCrumble 于 2016-06-14

❤1 👍1

etoah 于 2016-08-03

@MisterLamb等人，今天才尝试使用，此代码段不再适用于0.5.0 b4（获取空画布），如果不使用自己的画布则可以正确呈现。

编辑：可能是我的bug，改变小提琴是可以的。

编辑2：无法缩小范围，像这样重新实现，现在我看到了一些东西，但有些偏移。也许某处的样式无法完全支持h2c并弄乱了结果:(幸运的是，

编辑3：是的，必须将其上移到document.body以摆脱偏移量。

makc 于 2016-11-06

👍1

@MisterLamb你是一个真正的天才，感谢分享...它挽救了我的一天

prometeomcclellan 于 2017-02-21

@MisterLamb你是最好的👍

VarunSK 于 2017-03-14

@makc我也是！获取空画布-如果不使用自己的画布，则渲染正确。

luxueyan 于 2017-04-28

仅供参考-到目前为止， @ eKoopmans解决方案在测试中效果很好： https ：

seanfuture 于 2017-05-31

结束于＃1087

niklasvh 于 2017-07-27

@MisterLamb但是如何提高图像的分辨率？
当我尝试将此图像保存为96dpi时，我需要300+ dpi图像。我该怎么做？？？

shivtumca12 于 2017-11-21

在最新版本v1.0.0-alpha.1中， @ shivtumca12可以使用scale选项提高分辨率（ scale: 2将使分辨率从默认的96dpi翻倍）。

eKoopmans 于 2017-12-07

👍3

//缩放90％，然后再调用html2canvas，然后再缩放回100％。

document.body.style.zoom = '99％';
html2canvas（document.querySelector（“＃content”），{allowTaint：false，widht：_width，height：_height}）。然后（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();
});