एचटीएमएल 5 कैनवास सीमाएं

Question

मैं दस्तावेज़ीकरण को खोजने में असफल रहा हूं जो एचटीएमएल 5 कैनवास तत्व के बारे में सीमाओं का विवरण देता है जैसे कि सबसे बड़ा छवि फ़ाइल आकार जो लोड हो सकता है आदि। कारण मैं पूछता हूं कि मैं छवि का आकार बदलने की कोशिश कर रहा हूं 50kb से 2.0mb तक ctx.scale() के आकार के आकार, फिर भी यह एक ही छवि के लिए बहुत ही असंगत रहा है कभी-कभी ctx.drawImage() सफल होगा और अन्य बार असफल (कैनवास में कोई पुन: स्केल की गई छवि दिखाई नहीं दे रही है)।

मैं भी var base64 = canvas.toDataURL() का परिणाम नजर रखने के लिए console.log(base64) रखा है और देखा है कि जब सफलतापूर्वक आकृति परिवर्तन आकृति परिवर्तन base64 काफी एक लंबी स्ट्रिंग हो जाएगा के रूप में उम्मीद और जब असफल आकार दिया एक स्ट्रिंग अभी भी अभी तक अपेक्षाकृत कम दिखाई देगा और एक खाली आउटपुट छवि।

क्या इसमें स्मृति सीमाओं और असफल स्ट्रिंग्स के आसपास कुछ करने के लिए कुछ है? यदि हां, तो कैनवास तत्व पर लगाई गई स्मृति सीमाएं क्या हैं?

Answer 1

पहला:
हार्ड सीमाएं ब्राउज़र पर निर्भर करती हैं, कैनवास एपीआई नहीं।
फिर भी, ब्राउज़र हमेशा उस प्रदर्शन को बेहतर बनाने की कोशिश कर रहे हैं, ताकि संख्या हमेशा बदलती रहे।
लेकिन वेबगेल और कैनवास के साथ गेम बनाने के लिए इस्तेमाल किया जा रहा है, बनावट एटलस/स्प्राइट एटलस विशाल हैं .jpg/.png फ़ाइलें।
संभावनाएं बहुत अच्छी हैं कि आपकी छवियां छोटी हैं, और मैंने अक्सर प्रदर्शन के लिए कैनवास में 4 एमबी/5 एमबी/16 एमबी छवियों का उपयोग किया है।
एक बड़ी छवि (या उनमें से दर्जनों) टैब को क्रैश कर सकती हैं, अगर यह काफी बड़ी है, लेकिन उस समय तक, कैनवास ने वास्तव में मुझसे शिकायत नहीं की है।

दूसरा:
सुरक्षा-सीमाएं हैं।
canvas में फोटो संपादित करना आप किस ब्राउज़र पर हैं, और यह फ़ाइल आपकी वेबसाइट के समान डोमेन पर है या नहीं।

तीसरा:
जब आप कहते हैं कि "बड़ी फ़ाइलों को काम नहीं करते हैं, लेकिन वे कभी कभी करते हैं ..."
... कि मुझे विश्वास है कि आपके छवि लोडिंग विधि दोषपूर्ण है।

आप कुछ इस तरह करते हैं:

var canvas = document.createElement("canvas"), 
    context = canvas.getContext("2d"), 
    img = new Image(); 

img.src = "//mydomain.com/myimg.png"; 
context.drawImage(img, 0, 0, img.width, img.height); 

... या कुछ और जो नहीं या तो घटना आधारित या है कॉलबैक आधारित,
तो आपकी समस्या canvas साथ कोई संबंध नहीं है और है कॉलबैक के साथ सबकुछ करना है, और यह कि छवि लोड होने से पहले आप छवि को कैनवास में खींचने की कोशिश कर रहे हैं।

यदि आपके ब्राउज़र ने पहले से ही बड़ी छवि की प्रतिलिपि बनाई है, या यदि कोई छोटी छवि केवल डाउनलोड करने के लिए एक सेकंड का अंश लेती है, तो कोई समस्या नहीं है।

यदि आप 18 एमबी छवि डाउनलोड करने का प्रयास करते हैं, और जैसे ही आप छवि के लिए यूआरएल सेट करते हैं तो इसे कैनवास पर खींचें, तो आपको एक खाली स्क्रीन मिल जाएगी, क्योंकि यह लोडिंग समाप्त नहीं हुआ है।

इसके बजाय, आप लोड होने तक छवि के लिए प्रतीक्षा करने की जरूरत है, और तो कैनवास को आकर्षित इसके तैयार हो जाने।

var canvas = document.createElement("canvas"), 
    context = canvas.getContext("2d"), 
    image = new Image(); 

image.onload = function() { 
    var img = this, 
     width = img.width, 
     height = img.height; 

    canvas.width = width; 
    canvas.height = height; 
    context.drawImage(img, 0, 0, width, height); 

    document.body.appendChild(canvas); 
}; 

image.src = "//mydomain.com/path-to-really-huge-image.png"; 

अब यह एक 16MP छवि हो सकता है। फ़ाइल लोड होने तक कुछ भी नहीं होगा।
फिर, onload घटना आग लगती है, और शेष सेटअप करता है।

आप इसे और अधिक सार बना सकते हैं, और इसे निफ्टी प्रोग्राम में बदल सकते हैं, लेकिन ऐसा लगता है कि यह एक महत्वपूर्ण टुकड़ा है जिसे आप याद कर सकते हैं।