एक बूँद URL क्या है और इसका उपयोग क्यों किया जाता है?

Question

मुझे ब्लॉब URL की बहुत समस्या है।

मैं srcYouTube पर एक वीडियो टैग की खोज कर रहा था और मैंने पाया कि वीडियो इस प्रकार srcथा:

src="blob:https://crap.crap"

मैंने वह URL खोला जो srcउस वीडियो में था जिसमें उसने त्रुटि दी थी। मैं लिंक नहीं खोल सकता, लेकिन यह srcटैग के साथ काम कर रहा था । यह कैसे हो सकता है?

आवश्यकताएँ:

• बूँद URL क्या है?
• इसका उपयोग क्यों किया जाता है?
• क्या मैं सर्वर पर अपना खुद का ब्लॉब URL बना सकता हूँ?
• यदि आपके पास कोई अतिरिक्त विवरण है

Comments

इसके अलावा stackoverflow.com/q/14952052/632951

— पचेरियर

आवश्यक रूप से हॉटलिंकिंग को बंद कर देता है। (यूट्यूब की तरह)

— फेसपल्म

Answer 1

ब्लॉब यूआरएल (रेफरी डब्ल्यू 3 सी , आधिकारिक नाम) या ऑब्जेक्ट-यूआरएल (रेफरी एमडीएन और विधि का नाम) का उपयोग ब्लॉब या फाइल ऑब्जेक्ट के साथ किया जाता है ।

src = "blob: https: //crap.crap " मैंने वह बूँद url खोली जो वीडियो के src में थी, इसने एक त्रुटि दी और मैं नहीं खोल सकता लेकिन src टैग के साथ काम कर रहा था कि यह कैसे संभव है?

ब्लॉब यूआरएल केवल ब्राउज़र द्वारा आंतरिक रूप से उत्पन्न किया जा सकता है। URL.createObjectURL()बूँद या फ़ाइल ऑब्जेक्ट के लिए एक विशेष संदर्भ बनाएगा जिसे बाद में उपयोग करके जारी किया जा सकता है URL.revokeObjectURL()। ये URL केवल स्थानीय रूप से ब्राउज़र के एकल उदाहरण और उसी सत्र में उपयोग किए जा सकते हैं (अर्थात पृष्ठ / दस्तावेज़ का जीवन)।

बूँद url क्या है?
इसका उपयोग क्यों किया जाता है?

Blob URL / Object URL एक छद्म प्रोटोकॉल है, जिससे Blob और File वस्तुओं को URL स्रोत के रूप में उपयोग किया जा सकता है, जैसे कि छवियों, द्विआधारी डेटा के लिए लिंक और इसके बाद के संस्करण।

उदाहरण के लिए, आप एक इमेज ऑब्जेक्ट रॉ बाइट-डेटा को हाथ नहीं लगा सकते क्योंकि यह नहीं पता होगा कि इसके साथ क्या करना है। इसके लिए उदाहरण चित्रों (जो बाइनरी डेटा हैं) को URL के माध्यम से लोड करना होगा। यह ऐसे किसी भी चीज़ पर लागू होता है जिसके लिए स्रोत के रूप में URL की आवश्यकता होती है। बाइनरी डेटा अपलोड करने के बजाय, फिर इसे एक यूआरएल के माध्यम से वापस परोसें। सर्वर से गुजरे बिना डेटा को सीधे एक्सेस करने में सक्षम होने के लिए एक अतिरिक्त स्थानीय कदम का उपयोग करना बेहतर है।

यह डेटा-यूआरआई का एक बेहतर विकल्प भी है जो स्ट्रिंग्स बेस -64 के रूप में एन्कोडेड हैं । डेटा-यूआरआई के साथ समस्या यह है कि प्रत्येक चार्ट जावास्क्रिप्ट में दो बाइट्स लेता है। उसके ऊपर बेस -64 एनकोडिंग के कारण 33% जोड़ा जाता है। ब्लब्स शुद्ध बाइनरी बाइट-एरे हैं, जिनके पास कोई महत्वपूर्ण ओवरहेड नहीं है जैसा कि डेटा-यूआरआई करता है, जो उन्हें संभालने के लिए तेज और छोटा बनाता है।

क्या मैं किसी सर्वर पर अपनी खुद की ब्लॉन्ड यूआरएल बना सकता हूं?

नहीं, ब्लॉब यूआरएल / ऑब्जेक्ट यूआरएल केवल ब्राउज़र में आंतरिक रूप से बनाए जा सकते हैं। आप ब्लॉब्स बना सकते हैं और फाइल रीडर एपीआई के माध्यम से फाइल ऑब्जेक्ट प्राप्त कर सकते हैं, हालांकि BLOB का अर्थ केवल बाइनरी लार्ज OBject है और इसे बाइट-एरे के रूप में संग्रहीत किया जाता है। एक ग्राहक ArrayBuffer के रूप में या एक बूँद के रूप में भेजे जाने के लिए डेटा का अनुरोध कर सकता है। सर्वर को डेटा को शुद्ध बाइनरी डेटा के रूप में भेजना चाहिए। डेटाबेस अक्सर बाइनरी ऑब्जेक्ट्स का वर्णन करने के लिए ब्लॉब का उपयोग करता है, और संक्षेप में हम मूल रूप से बाइट-एरे के बारे में बात कर रहे हैं।

यदि आपके पास फिर अतिरिक्त विवरण है

आपको बाइनरी डेटा को BLOB ऑब्जेक्ट के रूप में एनकोड करना होगा, फिर इसके लिए URL.createObjectURL()एक स्थानीय URL उत्पन्न करने के लिए उपयोग करें:

var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
    url = URL.createObjectURL(blob),
    img = new Image();

img.onload = function() {
    URL.revokeObjectURL(this.src);     // clean-up memory
    document.body.appendChild(this);   // add image to DOM
}

img.src = url;                         // can now "stream" the bytes

ध्यान दें कि URLवेबकिट-ब्राउज़र में उपसर्ग किया जा सकता है, इसलिए उपयोग करें:

var url = (URL || webkitURL).createObjectURL(...);

Comments

पिछले 6 घंटों से मैं कोशिश कर रहा हूँ कि PHP एक वस्तु URL को AJAX से एक छवि फ़ाइल में पारित कर दे .. यह तब तक नहीं था जब तक मैं आपके स्पष्टीकरण को नहीं पढ़ लेता कि मुझे एहसास हुआ कि यह फ़ाइल में कोई डेटा क्यों नहीं लिख रहा था .. आपके संक्षिप्त और गहन विवरण ने मेरे दुख का अंत कर दिया है। धन्यवाद।

— 16

@ K3N उत्पन्न URL के बजाय बूँद URL का सही स्रोत प्राप्त करना संभव है? नेस्ट कैम लोगों को अपने स्वयं के कैमरे

— एलेक्स क्विटनी

मेरे लिए आत्मज्ञान "BLOB का अर्थ है बाइनरी लार्ज OBject"

— कैनबैक्स

क्या बूँद / फ़ाइल ऑब्जेक्ट की सामग्री को पुनः प्राप्त करना और जो कुछ भी है उसे डाउनलोड करना संभव है (छवि या वीडियो)?

— DFSFOT

: यह एक ब्लॉब वीडियो डाउनलोड करने के लिए कैसे सोच लोगों के लिए प्रासंगिक हो सकता है stackoverflow.com/q/42901942/1530508

— ApproachingDarknessFish

Answer 2

यह जावास्क्रिप्ट फ़ंक्शन क्लाइंट फ़ाइल में JSON फ़ाइल डाउनलोड करने के लिए ब्लॉब फ़ाइल एपीआई और डेटा एपीआई के बीच अंतर दिखाने के लिए प्रयोजन है:

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @author Loreto Parisi
 */

var saveAsFile = function(fileName, fileContents) {
    if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob
        var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'});
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        } else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    } else { // Alternative 2: using Data
        var pp = document.createElement('a');
        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' +
            encodeURIComponent(fileContents));
        pp.setAttribute('download', fileName);
        pp.onclick = document.body.removeChild(event.target);
        pp.click();
    }
} // saveAsFile

/* Example */
var jsonObject = {"name": "John", "age": 30, "car": null};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));

फ़ंक्शन को कहा जाता है saveAsFile('out.json', jsonString);। यह ब्राउज़र द्वारा तुरंत मान्यता प्राप्त एक बाइटस्ट्रीम बनाएगा जो फ़ाइल एपीआई का उपयोग करके सीधे उत्पन्न फ़ाइल डाउनलोड करेगा URL.createObjectURL।

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

Comments

क्या आप एक ट्वीट से वीडियो को बचाने के लिए इसे अनुकूलित कर सकते हैं?

— लॉजिकबल्के

Answer 3

बूँद url क्या है? इसका उपयोग क्यों किया जाता है?

BLOB सिर्फ बाइट अनुक्रम है। ब्राउज़र इसे बाइट स्ट्रीम के रूप में पहचानता है। इसका उपयोग स्रोत से बाइट स्ट्रीम प्राप्त करने के लिए किया जाता है।

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

क्या मैं किसी सर्वर पर अपनी खुद की ब्लॉन्ड यूआरएल बना सकता हूं?

हाँ, आपके पास ऐसा करने के लिए सर्वर तरीके हो सकते हैं उदाहरण के लिए कोशिश करें http://php.net/manual/en/function.ibase-blob-echo.php

आगे पढ़ें

• https://developer.mozilla.org/pl/docs/Web/API/Blob
• http://www.w3.org/TR/FileAPI/#dfn-Blob
• https://url.spec.whatwg.org/#urls

Comments

क्या मुझे BLOB url का उपयोग करने से कोई लाभ मिल सकता है?

— वकास ताहिर

आप पढ़ सकते हैं इस उत्तर प्राप्त करने का। जाहिर है कि पेशेवरों और विपक्ष हैं।

— रॉबर्ट

आप ऑब्जेक्ट-URL को BLOB के साथ मिला रहे हैं। ऑब्जेक्ट-URL एक छद्म प्रोटोकॉल है जो BLOB को URI स्रोत के रूप में उपयोग करने की अनुमति देता है।

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

— ट्रे

Answer 4

मैंने दोनों मामलों को संभालने के लिए काम कर रहे समाधान को संशोधित किया है .. जब वीडियो अपलोड किया गया है और जब छवि अपलोड की गई है .. आशा है कि यह कुछ मदद करेगा।

एचटीएमएल

<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>

जावास्क्रिप्ट

var fileEl = document.querySelector("input");

fileEl.onchange = function(e) {


    var file = e.target.files[0]; // selected file

    if (!file) {
        console.log("nothing here");
        return;
    }

    console.log(file);
    console.log('file.size-' + file.size);
    console.log('file.type-' + file.type);
    console.log('file.acutalName-' + file.name);

    let start = performance.now();

    var mime = file.type, // store mime for later
        rd = new FileReader(); // create a FileReader

    if (/video/.test(mime)) {

        rd.onload = function(e) { // when file has read:


            var blob = new Blob([e.target.result], {
                    type: mime
                }), // create a blob of buffer
                url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
                video = document.createElement("video"); // create video element
            //console.log(blob);
            video.preload = "metadata"; // preload setting

            video.addEventListener("loadedmetadata", function() { // when enough data loads
                console.log('video.duration-' + video.duration);
                console.log('video.videoHeight-' + video.videoHeight);
                console.log('video.videoWidth-' + video.videoWidth);
                //document.querySelector("div")
                //  .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
                (URL || webkitURL).revokeObjectURL(url); // clean up

                console.log(start - performance.now());
                // ... continue from here ...

            });
            video.src = url; // start video load
        };
    } else if (/image/.test(mime)) {
        rd.onload = function(e) {

            var blob = new Blob([e.target.result], {
                    type: mime
                }),
                url = URL.createObjectURL(blob),
                img = new Image();

            img.onload = function() {
                console.log('iamge');
                console.dir('this.height-' + this.height);
                console.dir('this.width-' + this.width);
                URL.revokeObjectURL(this.src); // clean-up memory
                console.log(start - performance.now()); // add image to DOM
            }

            img.src = url;

        };
    }

    var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
    rd.readAsArrayBuffer(chunk); // read file object

};

jsFiddle उरल

https://jsfiddle.net/PratapDessai/0sp3b159/

Comments

1. आपके कोड में इंडेंटेशन का उद्देश्य क्या है? हर कोई कोड की तार्किक संरचना को उजागर करने के लिए इंडेंटेशन का उपयोग करता है। 2. आपका JSFiddle कुछ नहीं करता है। मैंने एक छवि और एक वीडियो अपलोड करने की कोशिश की।

— 7vujy0f0hy