कैनवास 2 इमेज या एचटीएमएल 5 डाउनलोड एट्रिब्यूट के लिए एक क्रॉस-ब्राउजर विकल्प?

Question

जबकि एक pattern generator विकासशील मैं this प्रश्न में वर्णित एक ही समस्या में से 2011

दिए गए उत्तर चला रहा हूँ ऐसा नहीं वास्तव में एक क्रॉस-ब्राउज़र, क्लाइंट साइड समाधान प्रदान करते हैं।

मैं निम्नलिखित समाधान को स्वीकार करेंगे जब निर्यात पैटर्न बटन पर क्लिक: (कोई बात नहीं क्या

1. canvas2image के माध्यम से एक डाउनलोड ट्रिगर, जबकि यह सुनिश्चित करना कि फ़ाइल एक .png विस्तार के साथ सहेजा जाता है फ़ाइल नाम के लिए) छवि Canvas2Image.saveAsPNG() विधि से उत्पन्न साथ या,

2. प्रदर्शन एक विजेट (KendoUI अधिमानतः) की स्थापना की और उपयोगकर्ता वहाँ अधिमानतः का उपयोग नहीं कर से बचाने जाने है लंगड़ा राइट-क्लिक समाधान, लेकिन एक लिंक या बटन के साथ। बटन मैं वर्तमान में उपयोग कर रहा हूँ के लिए

HTML:

<button id="downloadbtn" onClick="javascript:downloadImage()" data-role="button" class="k-button">Export Pattern</button> 

समारोह है कि डाउनलोड से चलाता है:

function downloadImage() { 

    //...extra code omitted 
    var oCanvas = document.getElementById("my_canvas"); 
    oCanvas.width = $("#pixels-h").val(); 
    oCanvas.height = $("#pixels-v").val(); 
    Canvas2Image.saveAsPNG(oCanvas); 
    //...extra code omitted  

    } 

फ़ाइल क्रोम संस्करण 23.0 के साथ के तहत OSX ठीक डाउनलोड करने के लिए लगता है। 1271.9 5 और सफारी संस्करण 5.1.7 (6534.57.2)।

मेरे पास ओएसएक्स के लिए फ़ायरफ़ॉक्स 17.0.1 के तहत इसे डाउनलोड करने के बाद फ़ाइल खोलने में असमर्थ किसी की एक रिपोर्ट है। स्पष्ट रूप से डाउनलोड एक .part फ़ाइल उत्पन्न करता है।

सबसे बड़ी समस्या यह है कि फ़ाइल एक्सटेंशन के बिना मुझे संदेह है कि यह विधि विश्वसनीय हो सकती है।

मैं एक क्लाइंट-साइड केवल मौजूदा ब्राउज़र के साथ अधिकतम संभव संगतता के साथ समाधान के लिए देख रहा हूँ, इसलिए मुझे लगता है कि एचटीएमएल 5 download विशेषता चाल नहीं करेंगे के रूप में यह वर्तमान में केवल Chrome में समर्थित है।

कोई रचनात्मक समाधान?

Answer 1

मैं एक ही मुद्दे में भाग गया। मूल समस्या यह है कि फ़ाइल नाम को हेडर में जोड़ा जाना आवश्यक है लेकिन canvas2images दस्तावेज़ का उपयोग करता है। Location.href = strData और strData में हेडर नहीं हैं। तो जवाब यह है कि, canvas2image हमें जिस सुविधा की आवश्यकता है उसका समर्थन नहीं करता है, और हमें एक और समाधान करने की आवश्यकता होगी। (उदाहरण के लिए शायद FileSaver.js और कैनवास-toBlob.js)

http://eligrey.com/demos/FileSaver.js/