Retina iPad'de javascript içinde @ 2x görüntü ölçekleme nasıl engellenir?

Question

html <canvas> ve javascript kullanarak bir web oyunu geliştiriyorum. Oyun ayrıca iPad'de, tercihen hem retina hem de retina dışı ekranlarda işlevsel olmalıdır. Bu oyunda spritesheet png kullanıyorum. Bu bilgi sayfası 3500 piksel genişliğinde ve 3700 piksel yüksekliğinde.

Oyunumun mantığında, spriteları kapmak ve bunları tuvalime çekmek için tuvalim 'context.drawImage() kullanıyorum. Bir masaüstü tarayıcısında, bu gayet iyi çalışıyor ve her şey harika. Retina iPad'de, görüntü, boyutu 0-çağrılarımın çoğunun yüklenmesini sağlayarak, yüklenen görüntünün sınırlarının dışındaki pikselleri yakalamaya çalıştıklarını düşünür. (1200, 1400 konumunda bir hareketli grafik aldım ve iPad benim görüntümün bundan daha küçük olduğunu düşünürse, bir INDEX_SIZE_ERR hatası atılır.)

Örneğin, aşağıda yazılan kod projemde sahip olduğum şeydir. Genişliği ve yüksekliği uyarırken, 875 piksel genişliğinde 925 piksel yüksekliğinde bir görüntü elde ediyorum - orijinal resmin boyutunun tam 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"; 

retina ekranlar için bu normal bir çözüm iPad downscales zaman bu kadar, her şey yolunda boyutu artmıştır bir resmi oluşturmaktır. Bununla birlikte, yukarıda belirtilen boyutlara baktığımda, genişlik ve yükseklik boyutunda 4x boyutunda bir görüntü oluşturmak zorundayım. Bu 14.800 piksel yüksekliğinde 14.000 piksel genişliğinde bir görüntü oluşturur. Katı bir beyaz jpg olarak bile, bu görüntü Photoshop'ta kaydedilmez ve Gimp'de 1,9 GB büyüklüğünde rapor edilir. Doğal olarak bu bir çözüm değil. ;)

Bu yüzden sorum şu: iPad retina ekranının Javascript ile yüklenen görüntüleri küçültmekten nasıl korunmasının bir yolu var mı? 3500x3700 piksel resmini yüklediğimde 3500x3700 pikselde kalmam gerekiyor, bu yüzden context.drawImage() çağrılarım gerektiği gibi çalışıyor.

Her türlü fikir takdir edilecektir. Teşekkürler!

Answer 1

Eğer ekran retina veya aşağıdaki kullanarak olup olmadığını bulabilirsiniz:

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 
}