👨🏻‍⚖️ 👨‍👨‍👦‍👦 📑 छवि और थंबनेल डाउनलोडर। नए मानक, पुरानी समस्याएं ⬜️ 🔛 🐣

प्रस्तावना

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

मैं अच्छी तरह से समझता हूं कि मेरा लेख उस मानक के वर्तमान कार्यान्वयन का उपयोग करता है जो अभी तक पूरी तरह से विकसित नहीं हुआ है, और इसलिए मैं उन ब्राउज़रों की सूची दूंगा जो इस समय प्रासंगिक हैं:

फ़ायरफ़ॉक्स 8
क्रोम 15
ओपेरा 11.60 बीटा
सफारी 5.1.1
इंटरनेट एक्सप्लोरर 9

अब दुख की बात। IE 9 के लिए फ़ाइल एपीआई का कार्यान्वयन नहीं है, इसलिए मैं इसे (ब्राउज़र) नहीं मानूंगा। अच्छा, चलो चलते हैं।

दिखावट

पुराने समय से, फ़ाइल चयन संवाद खोलने के लिए कार्य एक स्टाइलिश बटन बनाने के लिए किया गया है। इसलिए, हिंसक बैसाखी का उपयोग किया गया था। उदाहरण के लिए, एक लोकप्रिय समाधान इनपुट को पारदर्शी बनाना और एक सुंदर दिवा के शीर्ष पर लटका देना है। यही है, सब कुछ इनपुट पर निर्भर करता है, इसके आकार पर। उपरोक्त सभी ब्राउज़र एक अलग समाधान का समर्थन करते हैं। उनमें, आप प्रोग्रामेटिक रूप से क्लिक इनपुट उत्पन्न कर सकते हैं। लेकिन वास्तव में, फ़ाइल चयन संवाद को कॉल करें। और इनपुट को आसानी से छिपाया जा सकता है:

<input id="input_file" type="file" multiple style="position:absolute; top:-999px; visibility:hidden"/> <div id="button" style="background-color: blue; width: 100px; height:40px;"></div>

 <script type="text/javascript"> var input = document.querySelector("#input_file"); var btn = document.querySelector("#button"); btn.onclick = function () { input.click(); }; </script>

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

ब्राउज़र में एक फ़ाइल डाउनलोड करने के बारे में

उदाहरण के लिए, फ़ाइल डेटा में हेरफेर करने के लिए, चित्र का आकार बदलना, आपको यह डेटा प्राप्त करने की आवश्यकता है। इसके लिए आपको FileReader की जरूरत है। थंबनेल बनाने के लिए, कैनवस को ले जाएं और वहां फ़ाइल डेटा लोड करें। यदि आप बेस 64 के रूप में डेटा का प्रतिनिधित्व करते हैं तो यह संभव है:

 var files; var reader = new FileReader(); var cv = document.createElement("canvas"); var cvContext = cv.getContext("2d"); input.onchange = function () { files = input.files; reader.readAsDataURL(files[0]); }; reader.onload = function (e) { var im = new Image(); im.onload = function (e) { cv.width = 100; cv.height = 100; cvContext.drawImage(im, 0, 0, 100, 100); //       canvas         } im.src = reader.result; };

अब तक, सब कुछ काफी पारदर्शी है। हालाँकि, आपको तुरंत यह कहना होगा कि ब्राउज़र में डेटा डाउनलोड करना सफारी में समर्थित नहीं है। सबसे दिलचस्प बात यह है कि आप फ़ाइल को सर्वर पर अपलोड कर सकते हैं, लेकिन ब्राउज़र को नहीं। न तो FileReader और न ही URL समर्थित हैं। हालांकि, हमारे कार्य के लिए एक समाधान है, लेकिन मैं ईमानदारी से इसका उपयोग नहीं करूंगा। बाद में मैं इस पर वापस आऊंगा।

थंबनेल प्राप्त करने और सर्वर पर भेजने के बारे में

So. हमारे पास मूल छवि है। हमारे पास कैनवास में थंबनेल हैं। हमें इसे प्राप्त करने की आवश्यकता है, इसे समूहबद्ध करें और सर्वर पर भेजें। कौन सा आसान है, है ना? यहीं से समस्याएं पैदा होती हैं। इस स्तर पर, ब्राउज़र पूरी तरह से अलग तरह से व्यवहार करते हैं। आइए सभी के लिए समाधान पर विचार करें। बेशक, सरल से जटिल तक।

फ़ायरफ़ॉक्स

यहां सब कुछ सरल है। कैनवस में एक mozGetAsFile तरीका है, जिसका नाम खुद के लिए बोलता है। फ़ायरफ़ॉक्स फॉर्मडाटा का भी समर्थन करता है। और इसका मतलब है कि हमारी फ़ाइलों के लिए एक कंटेनर है। XMLHttpRequest इस डेटा को आसानी से सर्वर पर भेजता है, जहाँ इसे उठाया जा सकता है। डाउनलोड प्रक्रिया को upload.onprogress का उपयोग करके मॉनिटर किया जा सकता है।

 var blobData = cv.mozGetAsFile(name, files[0].type); var form = new FormData(); form.append("Filedata0", files[0]); form.append("Filedata1", blobData); var xhr = new XMLHttpRequest(); xhr.open("POST", "load.php", true); xhr.onload = function () { console.log(this.response); } xhr.upload.onprogress = function (e) { console.log(e.position / e.totalSize) * 100; } xhr.send(form);

केवल एक माइनस है। MozGetAsFile विधि आपको अपलोड की गई छवि की गुणवत्ता का चयन करने की अनुमति नहीं देती है।

क्रोम

यहाँ कोई mozGetAsFile नहीं है। बेस 64 में छवि प्राप्त करना संभव है (यह toDataURL विधि द्वारा किया जाता है)। लेकिन वह मुझे सूट नहीं कर रहा था, और मैं अभी भी छवि को बूँद के लिए लाया था। कोड में टिप्पणियाँ:

 var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder; //    base64,     ( 0  1) var sBase64 = canva.toDataURL(type, 1); var aBase64 = sBase64.split(','); //  var sData = atob(aBase64[1]); var aBufferView = new Uint8Array(sData.length); // ArrayBuffer    for (var i = 0; i < aBufferView.length; i++) { aBufferView[i] = sData.charCodeAt(i); } //   BlobBuilder   blob var builder = new BlobBuilder(); builder.append(aBufferView.buffer); var blobData = builder.getBlob(type);

ये डेटा पहले से ही FormData को लिखा जा सकता है और फ़ायरफ़ॉक्स की तरह ही भेजा जा सकता है।

ओपेरा

यहां हमें बड़ी समस्याएं हैं। आप एक थंबनेल प्राप्त कर सकते हैं और क्रोम में उसी तरह एक ArrayBuffer में बदल सकते हैं, लेकिन आप इसे कैसे भेजते हैं? ओपेरा FormData और BlobBuilder का समर्थन नहीं करता है। और XMLHttpRequest टेक्स्ट को छोड़कर केवल ArrayBuffer भेज सकता है। यहां, फ्लैश पर बूटलोडर बनाने का अनुभव हमें मदद करेगा। हमें स्वयं डेटा के साथ फ़ॉर्म का शीर्षक उत्पन्न करना होगा, इसे ArrayBuffer पर लिखें और इसे सबमिट करें।

 var sBase64 = canva.toDataURL(type, 1); var aBase64 = sBase64.split(','); var sData = atob(aBase64[1]); var aBufferView = new Uint8Array(sData.length); for (var i = 0; i < aBufferView.length; i++) { aBufferView[i] = sData.charCodeAt(i); } var fBuilder = new FormBuilder(); fBuilder.addFile(aBufferView); var form = fBuilder.getForm(); var xhr = new XMLHttpRequest(); xhr.open("POST", "load.php", true); xhr.onload = function () { alert(this.response); } xhr.setRequestHeader('Content-type', 'multipart/form-data; boundary=' + fBuilder.BOUND); xhr.send(form); function FormBuilder() { this.getBoundary = function () { var _boundary = ""; for (var i = 0; i < 0x20; i++) { _boundary += String.fromCharCode(97 + Math.random() * 25); } return _boundary; } this.addFile = function (name, buffer) { var sHeader = this.ADDB + this.BOUND; sHeader += this.ENTER; sHeader += 'Content-Disposition: form-data; name="Filedata' + this.index + '"; filename="' + name + '"'; sHeader += this.ENTER; sHeader += 'Content-Type: application/octet-stream'; sHeader += this.ENTER; sHeader += this.ENTER; this.index++; this.header = this.sumBuffers(this.header, this.StrToBuffer(sHeader), buffer, this.EnterBuffer); } this.addParam = function (name, value) { var sHeader = this.ADDB + this.BOUND; sHeader += this.ENTER; sHeader += 'Content-Disposition: form-data; name="'+ name + '"'; sHeader += this.ENTER; sHeader += this.ENTER; sHeader += value; sHeader += this.ENTER; this.header = this.sumBuffers(this.header, this.StrToBuffer(sHeader)); } this.getForm = function () { var sHeader = this.ENTER; sHeader += this.ENTER; sHeader += (this.ADDB + this.BOUND + this.ADDB); var aHeader = this.StrToBuffer(sHeader); return this.sumBuffers(this.header, aHeader).buffer; } this.StrToBuffer = function (str) { var buffer = new Uint8Array(str.length); for (var i = 0; i < buffer.length; i++) { buffer[i] = str.charCodeAt(i); } return buffer; } this.sumBuffers = function () { var sumLength = 0, position = 0, aSumHeader; for (var i = 0; i < arguments.length; i++) { sumLength += arguments[i].length; } aSumHeader = new Uint8Array(sumLength); for (var i = 0; i < arguments.length; i++) { aSumHeader.set(arguments[i], position); position += arguments[i].length; } return aSumHeader; } this.BOUND = this.getBoundary(); this.ENTER = "\r\n"; this.EnterBuffer = this.StrToBuffer(this.ENTER); this.ADDB = "--"; this.index = 0; this.header = new Uint8Array(0); }

यह पहले लेख से मेरी कक्षा के जावास्क्रिप्ट से क्रियात्मक अनुवाद के लिए इस तरह का एक मुफ्त अनुवाद है। इसके साथ, हम अनिवार्य रूप से फॉर्मडाटा का अनुकरण करते हैं। वैसे, क्रोम में यह बहुत अच्छा काम करता है। लेकिन फ़ायरफ़ॉक्स शपथ लेता है - वह नहीं जानता कि कैसे ऐरेबफ़र पास किया जाए।
ओपेरा में वापस जाएँ। सब कुछ काम करता है, लेकिन यह डाउनलोड को ट्रैक करने के लिए काम नहीं करेगा: ओपेरा में onprogress समर्थित नहीं है (जैसे कि Flash URLLoader में)।

सफारी

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

निष्कर्ष

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

उदाहरण

मैं एक छोटा डेमो लाता हूं, वहां की कार्यक्षमता न्यूनतम है, लेकिन यह दर्शाता है कि इसे कैसे काम करना चाहिए।
हाँ, और अधिक। इस उदाहरण के लिए न्यूनतम सर्वर कोड यह है:

 foreach($_FILES as $key => $value){ $filename = substr_replace($key, '.', -4, 1); move_uploaded_file($value['tmp_name'], $filename); } echo 'complete';

यदि आपको सभी विला और विशेषताओं के साथ एक पूर्ण बूटलोडर की आवश्यकता है, तो लिखें। शायद मैं करूंगा।
और, ज़ाहिर है, यह मत भूलो कि ओपेरा का संस्करण उदाहरण के लिए 11.60 बीटा।

छवि और थंबनेल डाउनलोडर। नए मानक, पुरानी समस्याएं