Comment empêcher la mise à l'échelle de l'image 2x dans javascript sur un iPad rétine?

Question

Je suis en train de développer un jeu en ligne en utilisant html <canvas> et javascript. Le jeu doit également être fonctionnel sur l'iPad, de préférence à la fois sur les écrans rétiniens et non rétiniens. Dans ce jeu, j'utilise un pites spritesheet. Cette feuille de sprites a une largeur de 3500 pixels et une hauteur de 3700 pixels.

Dans la logique de mon jeu, j'utilise canvas 'context.drawImage() pour saisir les sprites et les dessiner dans ma toile. Dans un navigateur de bureau, cela fonctionne parfaitement bien, et tout est génial. Sur un iPad rétina, l'image ne charge que le quart de sa taille, ce qui fait échouer plusieurs de mes appels drawImage(), pensant qu'ils tentent de saisir des pixels en dehors des limites de l'image chargée. (Si j'attrape un sprite à l'emplacement 1200, 1400 et que l'iPad pense que mon image est plus petite, une erreur INDEX_SIZE_ERR est générée.)

Par exemple, le code ci-dessous correspond à ce que j'ai dans mon projet. Lorsque j'alerte la largeur et la hauteur, j'obtiens un résultat de 875 pixels de large sur 925 pixels de haut - exactement le quart de la taille de l'image 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 solution normale à ce pour les écrans de la rétine est de créer une image qui a augmenté en taille alors quand l'iPad downscales il, tout va bien. Cependant, en allant par les tailles rapportées ci-dessus, je devrais créer une image qui est 4x la taille en largeur et en hauteur. Cela fait une image qui aurait une largeur de 14 000 pixels et une hauteur de 14 800 pixels. Même en tant que jpg blanc solide, cette image ne parvient pas à enregistrer dans Photoshop, et est rapporté dans Gimp à 1,9 Go gros. Naturellement, ce n'est pas une solution. Par conséquent, ma question est la suivante: existe-t-il un moyen d'empêcher l'affichage de la rétine de l'iPad de redimensionner les images qui sont chargées via Javascript? Lorsque je charge mon image 3500x3700 pixels, j'en ai besoin pour rester à 3500x3700 pixels, donc mes appels context.drawImage() fonctionnent comme prévu.

Toutes les idées seraient appréciées. Merci!

Answer 1

vous pouvez trouver si l'affichage est de la rétine ou non à l'aide suivante:

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 
}