वीडियो या एसएफएफ़ या पीएनजी अनुक्रम के रूप में एचटीएमएल 5 कैनवास आउटपुट कैप्चरिंग?

Question

मुझे वीडियो या swf png अनुक्रम के रूप में HTML5 कैनवास आउटपुट लेने की आवश्यकता है।

मुझे छवियों को कैप्चर करने के लिए स्टैक ओवरफ्लो पर निम्न लिंक मिला।
Capture HTML Canvas as gif/jpg/png/pdf?

लेकिन क्या कोई सुझाव दे सकता है कि क्या हम आउटपुट वीडियो या पीएनजी अनुक्रम का एसएफएफ चाहते हैं?

संपादित करें:

ठीक है अब मैं समझ गया कैनवास डेटा पर कब्जा करने के लिए कैसे सर्वर पर स्टोर करने के लिए, मैं इसे करने की कोशिश की और यह ठीक है अगर मैं केवल आकार, आयत या कुछ अन्य ग्राफिक का उपयोग कर रहा है, लेकिन अगर मैं आकर्षित नहीं कैनवास तत्व पर बाहरी छवियों। क्या कोई मुझे बता सकता है कि कैनवास डेटा कैप्चर करने के लिए क्या हम कैनवास पर ड्राइंग के लिए ग्राफिक या बाहरी छवियों का उपयोग करते हैं?

मैं निम्नलिखित कोड का इस्तेमाल किया:

var cnv = document.getElementById("myCanvas"); 
var ctx = cnv.getContext("2d"); 

if(ctx) 
{ 
    var img = new Image(); 

    ctx.fillStyle = "rgba(255,0,0,0.5)"; 
    ctx.fillRect(0,0,300,300); 
    ctx.fill(); 

    img.onload = function() 
    { 
    ctx.drawImage(img, 0,0); 
    } 

    img.src = "my external image path"; 

    var data = cnv.toDataURL("image/png"); 
} 

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

अग्रिम धन्यवाद।

Answer 1

मेरा सुझाव है:

1. उपयोग setInterval एक PNG डेटा यूआरएल के रूप में अपने कैनवास की सामग्री पर कब्जा करने की।

   function PNGSequence(canvas){ 
       this.canvas = canvas; 
       this.sequence = []; 
   }; 
   PNGSequence.prototype.capture = function(fps){ 
       var cap = this; 
       this.sequence.length=0; 
       this.timer = setInterval(function(){ 
       cap.sequence.push(cap.canvas.toDataURL()); 
       },1000/fps); 
   }; 
   PNGSequence.prototype.stop = function(){ 
       if (this.timer) clearInterval(this.timer); 
       delete this.timer; 
       return this.sequence; 
   }; 
   
   var myCanvas = document.getElementById('my-canvas-id'); 
   var recorder = new PNGSequence(myCanvas); 
   recorder.capture(15); 
   
   // Record 5 seconds 
   setTimeout(function(){ 
       var thePNGDataURLs = recorder.stop(); 
   }, 5000); 
   

2. इन सभी पीएनजी डेटाURL को अपने सर्वर पर भेजें। यह डेटा का एक बहुत बड़ा ढेर होगा।

3. का उपयोग करते हुए जो कुछ भी सर्वर साइड भाषा आप की तरह (PHP, रूबी, पायथन) डेटा यूआरएल के हेडर पट्टी ताकि तुम सिर्फ बेस 64 इनकोडिंग PNG का

4. जो कुछ सर्वर साइड भाषा का उपयोग कर के साथ छोड़ दिया जाता है जैसे, बेस 64 डेटा को बाइनरी में कनवर्ट करें और अस्थायी फ़ाइलों को लिखें।

5. सर्वर पर जो भी तृतीय पक्ष लाइब्रेरी आप पसंद करते हैं, उसे पीएनजी फ़ाइलों के अनुक्रम को एक वीडियो में परिवर्तित करें।

संपादित: बाहरी छवियों की अपनी टिप्पणी के बारे में, आप एक कैनवास कि origin-clean नहीं है से एक डेटा URL नहीं बना सकते। जैसे ही आप बाहरी छवि के साथ drawImage() का उपयोग करते हैं, आपके कैनवास दंडित होते हैं। उस लिंक से:

सभी कैनवस तत्वों को उनके मूल-साफ सच करने के लिए सेट के साथ शुरू करनी चाहिए। ध्वज गलत पर सेट किया जाना चाहिए यदि निम्न कार्यों के किसी भी होते हैं:

[...]

तत्व के 2D प्रसंग के drawImage() विधि एक HTMLImageElement या एक HTMLVideoElement जिसका मूल के समान नहीं है के साथ कहा जाता है दस्तावेज़ ऑब्जेक्ट का है जो कैनवास तत्व का मालिक है।

[...]

जब भी कोई कैनवास तत्व जिसका मूल-साफ ध्वज गलत पर सेट है कहा जाता है के toDataURL() विधि, विधि एक SECURITY_ERR अपवाद उठाना चाहिए।

जब भी getImageData() कैनवास तत्व के 2 डी संदर्भ की विधि जिसका मूल-साफ़ ध्वज गलत पर सेट होता है उसे अन्यथा सही तर्क के साथ बुलाया जाता है, तो विधि को SECURITY_ERR अपवाद उठाना चाहिए।

Answer 2

प्रारंभ करने के लिए, आप नियमित अंतराल पर कैनवास से पिक्सेल डेटा कैप्चर करना चाहते हैं (संभवतः जावास्क्रिप्ट टाइमर का उपयोग करके)। आप canvas के संदर्भ पर context.getImageData को कॉल करके ऐसा कर सकते हैं। इससे छवियों की एक श्रृंखला बनाई जाएगी जो आप एक वीडियो स्ट्रीम में बदल सकते हैं।

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation