जावास्क्रिप्ट: डेटा यूआरआई

Question

पर एनिमेटेड जीआईएफ मैं PHP + एचटीएमएल + सीएसएस + जावास्क्रिप्ट में ओपन-सोर्स फॉलआउटिश 2 गेम लिख रहा हूं। अभी इंजन से निपटना। मेरे पास यह gif है: https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif

... जिसे मैं डेटा यूआरआई में परिवर्तित करना चाहता हूं। मुझे ऐसा करने की ज़रूरत है क्योंकि ब्राउजर कैश छवियों को कैश करते हैं और यह एक लूप नहीं होता है, इसलिए जब एनीमेशन समाप्त होता है और यूनिट एक और टाइल पर जाता है तो इसे "इसे फिर से चलाने" में सक्षम होने के लिए, मुझे इसे डेटा यूआरआई में परिवर्तित करने की आवश्यकता होती है। अन्यथा मुझे छवि को फिर से डाउनलोड करने के लिए मजबूर होना होगा उदा। छवि फ़ाइल के अंत में यादृच्छिक स्ट्रिंग जोड़कर। जो ठीक काम करता है, लेकिन बहुत अधिक स्थानांतरण लेता है और अंतराल का कारण बनता है।

var image = new Image(); 

    (..) 

    this.convertImageObjectToDataURI = function (image) { 
       var canvasTemp = document.createElement('canvas'); 
       canvasTemp.width = image.naturalWidth; // or 'width' if you want a special/scaled size 
       canvasTemp.height = image.naturalHeight; // or 'height' if you want a special/scaled size 

       canvasTemp.getContext('2d').drawImage(image, 0, 0); 

       var dataUri = canvasTemp.toDataURL('image/gif'); 

       // Modify Data URI beginning 
       dataUri = "data:image/gif;" + dataUri.substring(15); 
       console.log(dataUri); 

       // Return image as Data URI 
       return dataUri; 
}; 

दुर्भाग्य से यह केवल पहली फ्रेम के लिए डेटा यूआरआई का उत्पादन:

इस कोड मैं का उपयोग करने की कोशिश की है। मैंने प्लगइन खोजने की कोशिश की है, एचटीएमएल कैनवास के बारे में पढ़ रहा है, लेकिन अभी भी मुझे नहीं पता कि एनिमेटेड gif को डेटा URI में कैसे परिवर्तित किया जाए। कोई मदद बहुत ही होगी, बहुत स्वागत है!

Answer 1

मुझे विश्वास है कि जावास्क्रिप्ट का उपयोग करने के लिए ऐसा कोई सीधा तरीका नहीं है। कैनवास का उपयोग करके, आपको प्रत्येक व्यक्तिगत फ्रेम को उस पर खींचना होगा और उन्हें एक जीआईएफ फ़ाइल में एन्कोड करना होगा। यह वर्तमान एपीआई का उपयोग करके असंभव प्रतीत होता है क्योंकि एकल फ्रेम निकालने का कोई तरीका नहीं है (मैन्युअल रूप से जीआईएफ फाइल को पार्स करके)।

आप जावास्क्रिप्ट का उपयोग कर बाइनरी जीआईएफ फ़ाइल डाउनलोड करके सफल हो सकते हैं (HTTP अनुरोधों के क्रॉस-डोमेन प्रतिबंध याद रखें) और बेस 64-एन्कोडेड डेटा यूआरएल उत्पन्न करें। उदाहरण के लिए, आप U128Array प्राप्त करने के लिए this example का उपयोग कर सकते हैं, जिसे आप convert to a base64 string कर सकते हैं।

आपको जावास्क्रिप्ट का उपयोग न करने पर, डेटा URL को स्थिर रूप से उत्पन्न करने पर विचार करना चाहिए। उदाहरण के लिए, यदि आप अपने gif फ़ाइल के लिए डेटा यूआरएल उत्पन्न करने के लिए इस शेल कमांड का उपयोग कर सकते हैं:

echo "data:image/gif;base64,"`curl --silent 'https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif' | base64 --wrap=0` 

भी ऑनलाइन सेवाओं जो फ़ाइलों से डेटा यूआरएल उत्पन्न होगा की एक संख्या है।

Answer 2

जावास्क्रिप्ट को इस मोड द्वारा सभी फ़ाइलों को संगतता के साथ सर्वर फ़ाइलों को पढ़ने के लिए संभव नहीं है, लेकिन मैं आपको एनिमेटेड gifs के बजाय sprites का उपयोग करने की सलाह देता हूं। एक स्प्राइट एक पीएनजी फ़ाइल है (जो अल्फा चैनल की अनुमति देता है) अलग-अलग फ्रेम तैयार किए गए फ्रेम के साथ। उस फ़ाइल की कल्पना कीजिए:

आप देख सकते हैं, यह एक 600x150 छवि (150x150 प्रत्येक फ्रेम, 4 फ्रेम) है। डॉन आप: तो आप इस तरह CSS एनिमेशन के साथ चेतन कर सकते हैं:

.dots { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-image: url(http://i.stack.imgur.com/bCHFq.png); 
 
    
 
    -webkit-animation: play .4s steps(4) infinite; 
 
     -moz-animation: play .4s steps(4) infinite; 
 
     -ms-animation: play .4s steps(4) infinite; 
 
     -o-animation: play .4s steps(4) infinite; 
 
      animation: play .4s steps(4) infinite; 
 
} 
 

 
@-webkit-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-moz-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-ms-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-o-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
}

<div class="dots"></div>

इसी के साथ

, मुख्य-फ़्रेम, वेग, फ्रेम (कदम) की संख्या, और सबसे महत्वपूर्ण समायोजित कर सकते हैं ब्राउज़र क्लाइंट में सीपीयू और रैम मेमोरी अधिभार नहीं है।

शुभकामनाएं।