如何在視網膜iPad上防止JavaScript內的@ 2x圖像縮放？

我正在開發一個使用html <canvas>和javascript的網頁遊戲。遊戲還必須在iPad上運行，最好是視網膜和非視網膜顯示器。在這個遊戲中，我使用了一個spritesheet png。該spritesheet是3500像素寬和3700像素高。如何在視網膜iPad上防止JavaScript內的@ 2x圖像縮放？

在我的遊戲邏輯中，我使用畫布'context.drawImage()抓住小精靈並將它們繪製到我的畫布中。在桌面瀏覽器中，這種工作非常好，而且一切都很好。在視網膜iPad上，圖像僅加載四分之一的大小，這使得我的很多drawImage()調用失敗，認爲它們試圖抓取加載圖像邊界外的像素。（如果我在位置1200,1400處抓住一個精靈，並且iPad認爲我的圖像小於此值，則會拋出INDEX_SIZE_ERR錯誤。）

例如，下面編寫的代碼就是我在我的項目中使用的代碼。當提醒寬度和高度時，我得到875像素寬925像素高的結果 - 正好是原始圖像大小的1/4。

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 downscales它，一切都很好的圖像。但是，按照上面報告的尺寸，我將不得不創建一個尺寸爲寬度和高度4倍的圖像。這使得圖像寬14,000像素，高14,800像素。即使是純白色的jpg，這張圖片也無法在Photoshop中保存，據報道在Gimp中大小爲1.9GB。當然，這不是一個解決方案。 ;）

因此，我的問題是：有沒有一種方法可以防止iPad視網膜顯示器通過Javascript加載的縮小圖像？當我加載我的3500x3700像素圖像時，我需要它保持在3500x3700像素，因此我的context.drawImage()調用按預期工作。

任何和所有的想法，將不勝感激。謝謝！

來源

2012-07-19 Alexander Degré

要雪上加霜的是我已經注意到iPad3的視網膜移動Safari和Mac上的Safari處理的帆布和devicePixelRatio不同，當涉及到上下文圖像數據大小。 – 2012-07-26 13:49:35

UPDATE to above *顯然這是OSX中Safari 6中修復的一個bug。現在，桌面視網膜的行爲就像iPad和iPhone – 2012-07-26 17:40:31

我最終使用的解決方案是將我的spritesheet分成多個較小的spritesheet（文件大小和像素大小均較小）。在任何一個方向上，如果圖像的像素小於3000像素，iPad視網膜不會嘗試縮小圖像的大小，通過'.width（）'和'.height（）'校正寬度和高度。 – 2012-08-02 14:58:42

你可以找到顯示器是否是視網膜或不使用下列內容：

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 
}

來源

2012-07-19 16:31:13 Shreedhar

這是最簡單的部分！ :)一旦我找出當我在視網膜顯示器上時，如何加載圖像並保持我需要的圖像尺寸？不幸的是，試圖按照視網膜縮放提供14,000像素的圖像不會（也不會）工作。 – 2012-07-19 16:37:56

視網膜顯示時應該運行什麼功能？我很難找到你的問題。你可以讓我知道什麼像素在視網膜上加載時會加載嗎？如果不是？ – Shreedhar 2012-07-19 16:46:12

如何在視網膜iPad上防止JavaScript內的@ 2x圖像縮放？

回答

相關問題