Come evitare @ 2x ridimensionamento delle immagini in javascript su un iPad retina?

Question

Sto sviluppando un gioco Web utilizzando HTML <canvas> e javascript. Il gioco deve anche essere funzionale sull'iPad, preferibilmente su entrambi i display retina e non-retina. In questo gioco, utilizzo un png di spritesheet. Questo sprite è largo 3500 pixel e alto 3700 pixel.

Nella logica del mio gioco, sto usando la tela 'context.drawImage() per catturare gli sprite e disegnarli nella mia tela. In un browser desktop, funziona perfettamente e tutto è perfetto. Su una retina iPad, l'immagine carica solo un quarto delle sue dimensioni, il che rende molte delle mie chiamate drawImage() fallite, pensando che stiano cercando di afferrare pixel al di fuori dei confini dell'immagine caricata. (Se prendo uno sprite nella posizione 1200, 1400 e l'iPad pensa che la mia immagine sia più piccola, viene generato un errore INDEX_SIZE_ERR.)

Ad esempio, il codice scritto di seguito è ciò che ho nel mio progetto. Quando allerta la larghezza e l'altezza, ottengo un risultato di 875 pixel di larghezza per 925 pixel di altezza, esattamente 1/4 della dimensione dell'immagine originale.

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"; 

La soluzione normale a questo per i display retina è quello di creare un'immagine che è aumentato in termini di dimensioni in modo che quando l'iPad Rimpicciolisce esso, è tutto a posto. Tuttavia, andando per le dimensioni sopra riportate, dovrei creare un'immagine che è 4x la dimensione in larghezza e altezza. Ciò rende l'immagine larga 14.000 pixel e alta 14.800 pixel. Anche se è un solido jpg bianco, questa immagine non riesce a salvare in Photoshop, ed è riportata in Gimp per essere grande 1,9 GB. Naturalmente questa non è una soluzione. ;)

Pertanto, la mia domanda è la seguente: esiste un modo per impedire alla retina iPad di visualizzare le immagini di downscaling caricate tramite Javascript? Quando carico la mia immagine da 3500x3700 pixel, ho bisogno che rimanga a 3500x3700 pixel, quindi le mie chiamate context.drawImage() funzionano come previsto.

Qualsiasi e tutte le idee sarebbero apprezzate. Grazie!

Answer 1

si può trovare se il display è della retina o non utilizzo di seguito:

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 
}