सहेजें पीएनजी (आदि) फ़ायरफ़ॉक्स में this demo में काम करते हैं, लेकिन नहीं क्रोम। पीएनजी (आदि) के लिएक्रोम में एक फ़ाइल में एचटीएमएल 5 कैनवास सहेजें?
Convert फ़ायरफ़ॉक्स और क्रोम में काम करते हैं।
वहाँ * क्रोम में एक तरह से * एक स्थानीय फाइल करने के लिए एक कैनवास तत्व की एक छवि को बचाने के लिए है - या एक सर्वर के लिए?
यह करने के लिए सबसे आसान तरीका toDataURL() समारोह का प्रयोग है। आप इसे एक PNG के रूप में कैनवास के साथ एक नई विंडो खोलने पॉप कर सकते हैं, आईडी के साथ "saveButton" एक बटन के साथ फिर
var canvas = document.getElementById("myCanvas");
, है, और उपयोगकर्ता को बचा सकता है कि:
आप एक कैनवास है कहो पृष्ठ।
document.getElementById("saveButton").onClick = function() {
window.open(canvas.toDataURL());
}
सैम दत्तन: (के बारे में टिप्पणी टिमोथी आर्मस्ट्रांग के जवाब में छोड़ दिया) 'SECURITY_ERR: डोम अपवाद 18' त्रुटि है कि आप हो रही है शायद इसलिए है क्योंकि अपने कैनवास में आप एक छवि है कि एक अलग से आता लोड कर दिया है डोमेन, उदाहरण के लिए। हो सकता है कि छवि आपके सर्वर पर होस्ट की गई हो, इसलिए आप स्थानीय रूप से त्रुटि क्यों देखते हैं लेकिन आपके सर्वर पर होस्ट नहीं होने पर। जब भी आप किसी विदेशी डोमेन से कैनवास में छवियां लोड करते हैं, तो कुछ API कॉल को सुरक्षा कारणों से प्रतिबंधित किया जाता है जैसे toDataUrl() और getPixelData()। यह क्रॉस-डोमेन अजाक्स कॉल के साथ दिखाई देने वाली वही मूल नीति समस्या के समान है।
सेवएस कैनवास के लिए, ब्राउज़र कार्यान्वयन स्पॉटी है, ब्राउज़र के लिए जो इसका समर्थन नहीं करते हैं, मुझे विश्वास है कि आप अभी भी <img /> टैग के अंदर एक छवि के रूप में कैनवास दिखाई दे सकते हैं। बस उस डेटा में src विशेषता को सेट करें जिसे आप वापस डेटाटाल() से प्राप्त करते हैं, फिर आप उपयोगकर्ता को राइट क्लिक -> सेव करने के लिए आमंत्रित कर सकते हैं। मेरा मानना है कि आपके द्वारा पोस्ट किए गए लिंक में डेमो यह करता है।
आपकी टिप्पणियों के लिए धन्यवाद। सुरक्षा 'त्रुटि' तब होता है जब toDataURL() स्थानीय स्तर पर (अर्थात एक सर्वर पर नहीं) चलाया जाता है। कैनवास तत्व की सामग्री का निर्माण करने के लिए, मैं स्रोत है, यानी इस तरह के रूप में एक स्थानीय वीडियो फ़ाइल के साथ drawImage फोन कर रहा हूँ: canvasContext.drawImage (videoEl, 0, 0, videoWidth/2, videoHeight/2); –
क्या आप वाकई वीडियो फ़ाइल स्थानीय हैं, और आपके सर्वर से नहीं आ रहे हैं? –
>> क्या आप सुनिश्चित हैं कि वीडियो फ़ाइल स्वयं स्थानीय है << हां: वीडियो स्थानीय निर्देशिका में है और इस तरह के src path के माध्यम से पहुंचा: 'video/myVideo.ogv'। –
मुसीबत है कि (क्रोम से) यह एक त्रुटि देता है डोम अपवाद 18. मैं इस त्रुटि के लिए संदर्भ मिल गया है (http: // listings.w3.org/Archives/Public/public-webapi/2006May/0027.html, उदाहरण के लिए), लेकिन इसके बारे में कोई जानकारी नहीं है कि (या नहीं) इसके आसपास जाना संभव है या नहीं। –
मुझे अभी पता चला है कि त्रुटि स्थानीय रूप से होती है - लेकिन अगर सर्वर पर कोड चलाया जाता है। हालांकि, मैं अभी भी एक तरह से (Firefox में) की तरह एक सहेजें प्रदान करने के लिए संवाद के रूप में और न सिर्फ एक नई विंडो में पीएनजी खोलने के लिए देख रहा हूँ। –
मुझे पूरा यकीन है कि आप सहेजने वाले संवाद को प्रकट नहीं कर सकते हैं; सबसे अच्छा आप कर सकते हैं परिणामस्वरूप पीएनजी एक नए टैब में खोलें और उपयोगकर्ता को बचाएं। यह वह व्यवहार है जिसे मैंने देखा है सभी कैनवास अनुप्रयोगों में। खिड़की के लिए मेरी प्रतिक्रिया संपादित करें। –