ब्लॉब URL को सामान्य URL में बदलें

Question

मेरा पेज इस तरह से एक URL बनाता है: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"मैं इसे एक सामान्य पते में कैसे बदल सकता हूं?

मैं इसे एक <img>'s srcविशेषता के रूप में उपयोग कर रहा हूँ ।

Comments

URL को डिकोड करने के बाद भी, यह अभी भी एक localhostलिंक है। इसके बजाय इसकी सार्वजनिक लिंक का पता लगाएं। (जो सीडीएन आप उपयोग कर रहे हैं?)

— रैप्टर

मैं जावास्क्रिप्ट का उपयोग करना चाहता हूं।

— जैकब

स्टैक्ववरफ्लो लिंक का उपयोग करें .. और W3C आपकी वास्तविक समस्या यह होगी कि आप इसे पर्यावरण से स्वतंत्र कैसे बना सकते हैं, जिसमें आप अपना कोड

— user1428716

क्या ब्लॉब एड्रेस से पब्लिक यूआरएल खोजने का कोई तरीका है। यह मेरे लिए एकमात्र मूल्य है।

— याकूब

इसके अलावा superuser.com/q/948738/78897

— Pacerier

Answer 1

एक URL जो जावास्क्रिप्ट से बनाया गया था, उसे Blob"सामान्य" URL में नहीं बदला जा सकता है।

एक blob:URL सर्वर पर मौजूद डेटा को संदर्भित नहीं करता है, यह उस डेटा को संदर्भित करता है जो आपके ब्राउज़र में वर्तमान पृष्ठ के लिए स्मृति में है। यह अन्य पृष्ठों पर उपलब्ध नहीं होगा, यह अन्य ब्राउज़रों में उपलब्ध नहीं होगा, और यह अन्य कंप्यूटरों से उपलब्ध नहीं होगा।

इसलिए इसका मतलब यह नहीं है कि सामान्य तौर पर, BlobURL को "सामान्य" URL में बदलना है । यदि आप एक साधारण यूआरएल चाहते हैं, तो आपको ब्राउज़र से सर्वर पर डेटा भेजना होगा और सर्वर को एक साधारण फ़ाइल की तरह उपलब्ध कराना होगा।

कम से कम क्रोम में blob:URL को URL में बदलना संभव है data:। आप blob:URL से डेटा प्राप्त करने के लिए एक AJAX अनुरोध का उपयोग कर सकते हैं (भले ही यह वास्तव में आपके ब्राउज़र की मेमोरी से बाहर खींच रहा हो, HTTP अनुरोध नहीं बना रहा है)।

यहाँ एक उदाहरण है:

var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
   var recoveredBlob = xhr.response;

   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     window.location = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send();

data:URL संभवत: "सामान्य" से आपके मतलब के नहीं हैं और समस्यात्मक रूप से बड़े हो सकते हैं। हालाँकि वे सामान्य URL की तरह काम करते हैं, जिसमें उन्हें साझा किया जा सकता है; वे वर्तमान ब्राउज़र या सत्र के लिए विशिष्ट नहीं हैं।

Comments

यदि ब्लॉब url सर्वर डेटा की ओर इशारा नहीं करते हैं, तो कैसे यूट्यूब वीडियोस के src url दिखते हैं जैसे: src = "blob: https% 3A // www.youtube.com / 44f26667-03f1-4978-9eed-af0cbf11dd67" (में क्रोम)

— bhh1988 15

@ bhh1988 यह एक बहुत ही दिलचस्प खोज है। मुझे यकीन नहीं है कि वहाँ क्या हो रहा है। अगर मैं XMLHttpRequest का उपयोग करके उनके src ब्लॉब URL को पुनः प्राप्त करने का प्रयास करता हूं, जैसा कि इस पोस्ट में वर्णित है, तो कोई भी सामग्री वापस नहीं आती है। मेरा अनुमान है कि या तो (ए) उन्होंने किसी अन्य स्रोत से डेटा फीड करते समय प्लेसहोल्डर के रूप में उपयोग करने के लिए किसी भी खाली URL को उत्पन्न किया या (b) ब्लॉब किसी तरह एन्क्रिप्टेड डेटा (HTML5 एन्क्रिप्टेड मीडिया एक्सटेंशन के माध्यम से) के लिए एक प्रॉक्सी के रूप में कार्य करता है। हालाँकि, मुझे यकीन नहीं है कि वास्तव में ये दोनों कैसे हो सकते हैं।

— जेरेमी

@ bhh1988 ऐसा लगता है कि मीडिया स्रोत एक्सटेंशन स्पेक जावास्क्रिप्ट द्वारा प्रबंधित किए जा रहे मीडिया स्ट्रीम के लिए ब्लॉब URL बनाने की अनुमति देता है। ये इस पोस्ट में चर्चा किए गए ब्लॉब URL जैसे स्थैतिक डेटा के अनुरूप नहीं हैं, इसलिए व्यवहार में अंतर है, लेकिन वे अभी भी स्थानीय जानकारी को संदर्भित करते हैं, सीधे सर्वर पर डेटा के लिए नहीं।

— जेरेमी

हम्म, सही लगता है। यह भ्रामक है क्योंकि url वास्तविक और इरादतन दिखता है, लेकिन अगर यह सिर्फ एक प्लेसहोल्डर है तो इससे कोई फर्क नहीं पड़ता कि src का मूल्य क्या है।

— bhh1988

मुझे एक Not allowed to navigate top frame to data URL: data:text/plain;base64,...त्रुटि मिलती है । मुझे डेटा मिलता है, लेकिन इसकी window.locationअनुमति नहीं है ...

— loretoparisi

Answer 2

बूँद url से डेटा url बनाने का एक और तरीका कैनवास का उपयोग करना हो सकता है।

var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
context.drawImage(img, 0, 0) // i assume that img.src is your blob url
var dataurl = canvas.toDataURL("your prefer type", your prefer quality)

जैसा कि मैंने mdn में देखा है, कैनवस .toDataURL को ब्राउज़र द्वारा अच्छी तरह से समर्थित किया गया है। (छोड़कर <<9, हमेशा यानी <9)

Comments

ध्यान दें कि यह पाठ्यक्रम केवल छवि डेटा के लिए लागू होता है, और कुछ मेटाडेटा खो सकता है!

— माइनमैक्सगव

ऐसा करने से एक लिंक बन जाता है लेकिन अगर आप इसका अनुसरण करते हैं तो आपको केवल एक ब्लैक बॉक्स मिलता है।

— एंटीफिश

@Antfish, ऐसा नहीं होना चाहिए?

— पचेरियर

Answer 3

उन लोगों के लिए जो एक बूँद url वीडियो / ऑडियो डाउनलोड करने का तरीका खोज रहे हैं, इस जवाब ने मेरे लिए काम किया । संक्षेप में, आपको Chrome -> नेटवर्क टैब के माध्यम से वांछित वेब पेज पर एक * .m3u8 फ़ाइल ढूंढनी होगी और इसे VLC प्लेयर में पेस्ट करना होगा ।

एक अन्य गाइड आपको दिखाता है कि वीएलसी प्लेयर के साथ स्ट्रीम को कैसे बचाया जाए ।

Answer 4

जैसा कि पिछले उत्तर में कहा गया है, इसे वापस url में डीकोड करने का कोई तरीका नहीं है, यहां तक ​​कि जब आप इसे क्रोम devtools पैनल से देखने का प्रयास करते हैं, तो भी url को बूँद के रूप में एन्कोड किया जा सकता है।

हालांकि, डेटा प्राप्त करना संभव है, डेटा प्राप्त करने का एक और तरीका यह है कि इसे एक लंगर में डाल दिया जाए और इसे सीधे डाउनलोड करें।

<a href="blob:http://example.com/xxxx-xxxx-xxxx-xxxx" download>download</a>

इस पेज को बूँद url वाले पेज पर डालें और बटन पर क्लिक करें, आपको सामग्री मिल जाएगी।

एक और तरीका है प्रॉक्सी सर्वर के माध्यम से अजाक्स कॉल को इंटरसेप्ट करना, फिर आप सही छवि url देख सकते हैं।

Comments

<a href="blob: example.com/xxxx-xxxx-xxxx-xxxx "download="abc.txt"> डाउनलोड करें </a>। यह काम करना चाहिए। जब यह href पर आएगा, तो यह बूँद को abc.txt में बदल देगा और डाउनलोड करेगा

— P Satish Patro

क्यों घटता है? क्या आपने वास्तव में कोशिश की है कि मैंने क्या कहा?

— ospider

मैंने नीचा नहीं देखा। मैं यहाँ आया था। और, मैंने सोचा कि यह काम करेगा। मैं इसके एक छोटे से पक्ष का समर्थन कर रहा हूं

— पी सतीश पात्रो