如何在Retina iPad上使用JavaScript防止@2x图像缩放？

Question

如何在Retina iPad上使用JavaScript防止@2x图像缩放？

javascriptipadmobile-safariretina-display

7

我正在使用html <canvas>和javascript开发一个网页游戏。该游戏必须在iPad上运行，最好支持视网膜和非视网膜显示器。在游戏中，我使用了一个精灵图png。这个精灵图的宽度是3500像素，高度是3700像素。

在我的游戏逻辑中，我使用canvas的context.drawImage()将精灵抓取并绘制到我的画布中。在桌面浏览器中，这完全没有问题，一切都很好。但在视网膜iPad上，图像仅以其大小的四分之一加载，这使得我的许多drawImage()调用失败，因为它们试图抓取超出加载图像边界的像素。（如果我在位置1200、1400处抓取一个精灵，并且iPad认为我的图像比这小，那么就会抛出INDEX_SIZE_ERR错误。）

例如，下面的代码是我项目中的代码。当我弹出宽度和高度时，结果为875像素宽乘925像素高 - 正好是原始图像大小的四分之一。

spritesheet = new Image();
spritesheet.onload = function() {
    splashInterval = setInterval(renderFrame, 30);
    alert(spritesheet.width); // returns 875 on retina iPad
    alert(spritesheet.height); // returns 925 on retina iPad
};
spritesheet.src = "/spritesheet.png";

针对视网膜显示器的常规解决方案是创建一个增大尺寸的图像，这样当iPad将其缩小时，一切都没问题。然而，根据上述报告的尺寸，我需要创建一个宽度和高度均为原图像4倍的图像。这将生成一个14,000像素宽、14,800像素高的图像。即使作为纯白色jpg格式，这个图像在Photoshop中也无法保存，并且在Gimp中被报告为1.9GB。显然这不是解决方案。 ;)

因此，我的问题仍然存在：有没有办法防止通过Javascript加载的图像在iPad视网膜显示器上被缩小？当我加载我的3500x3700像素图像时，我需要它保持在3500x3700像素的大小，以便我的context.drawImage()调用按预期工作。

欢迎提出任何想法。谢谢！

- A. Degré

更让人气馁的是，我注意到iPad3视网膜移动Safari和Mac上的Safari在处理画布和设备像素比时，在上下文图像数据大小方面存在差异。 - Chris Bosco

更新至上文* 显然这是Safari 6为OSX修复的一个错误。现在桌面Retina的表现与iPad和iPhone相似。 - Chris Bosco

1

我最终采用的解决方案是将我的精灵图分割成多个较小的精灵图（文件大小和像素大小都较小）。如果图像在任何方向上小于约3000像素，iPad retina就不会尝试缩小图像，这样可以纠正通过.width()和.height()报告的宽度和高度。 - A. Degré

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shreedhar · Accepted Answer

您可以使用以下方法查看显示屏是否为视网膜屏幕：

var retina = window.devicePixelRatio > 1 ? true : false;

if (retina) {
    // the user has a retina display
    // do something

}
else {
    // the user has a non-retina display
    // do something else 
}