रेटिना आईपैड पर जावास्क्रिप्ट के भीतर @ 2x छवि स्केलिंग को कैसे रोकें?

Question

मैं एचटीएमएल <canvas> और जावास्क्रिप्ट का उपयोग कर एक वेब गेम विकसित कर रहा हूं। यह गेम आईपैड पर भी कार्यात्मक होना चाहिए, अधिमानतः दोनों रेटिना और गैर-रेटिना डिस्प्ले। इस खेल में, मैं एक spritesheet पीएनजी का उपयोग करें। यह spritesheet 3500 पिक्सल चौड़ा और 3700 पिक्सेल ऊंचा है।

मेरे खेल के तर्क में, मैं sprites को पकड़ने के लिए कैनवास 'context.drawImage() का उपयोग कर रहा हूं और उन्हें अपने कैनवास में खींच सकता हूं। एक डेस्कटॉप ब्राउज़र में, यह पूरी तरह से ठीक काम करता है, और सब कुछ बढ़िया है। रेटिना आईपैड पर, छवि इसके आकार के केवल एक चौथाई हिस्से में लोड होती है, जो मेरी कई drawImage() कॉल विफल हो जाती है, सोचती है कि वे लोड की गई छवियों की सीमाओं के बाहर पिक्सेल को पकड़ने की कोशिश कर रहे हैं। (यदि मैं स्थान 1200, 1400 पर एक स्प्राइट पकड़ता हूं, और आईपैड सोचता है कि मेरी छवि उससे छोटी है, तो 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"; 

रेटिना डिस्प्ले के लिए इस के लिए सामान्य समाधान एक छवि है कि आकार में वृद्धि हुई है, इसलिए जब आईपैड यह downscales, सब कुछ ठीक है बनाने के लिए है। हालांकि, ऊपर बताए गए आकारों से जाकर, मुझे एक ऐसी छवि बनाना होगा जो चौड़ाई और ऊंचाई में 4x आकार का हो। इससे एक छवि बनती है जो 14,800 पिक्सेल चौड़ी 14,800 पिक्सेल चौड़ी होगी। यहां तक ​​कि एक ठोस सफेद जेपीजी के रूप में, यह छवि फ़ोटोशॉप में सहेजने में विफल रही है, और गिंप में 1.9 जीबी बड़ा होने की सूचना दी गई है। स्वाभाविक रूप से यह एक समाधान नहीं है। ;)

इसलिए मेरा प्रश्न खड़ा है: क्या जावास्क्रिप्ट के माध्यम से लोड की गई छवियों को डाउनस्कलिंग छवियों से आईपैड रेटिना डिस्प्ले को रोकने का कोई तरीका है? जब मैं अपनी 3500x3700 पिक्सेल छवि लोड करता हूं, तो मुझे 3500x3700 पिक्सेल पर रहने की आवश्यकता होती है, इसलिए मेरा context.drawImage() कॉल इरादे के अनुसार काम करता है।

किसी भी और सभी विचारों की सराहना की जाएगी। धन्यवाद!

Answer 1

आप पा सकते हैं कि क्या प्रदर्शन रेटिना या निम्न का उपयोग नहीं कर रहा है:

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 
}