แปลง blob URL เป็น URL ปกติ

หน้าของฉันสร้าง URL แบบนี้"blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"ฉันจะแปลงเป็นที่อยู่ปกติได้อย่างไร?

ฉันใช้มันเป็น<img>ของsrcแอตทริบิวต์

URL ที่สร้างจาก JavaScript Blobไม่สามารถแปลงเป็น URL "ปกติ" ได้

blob:URL ไม่ได้หมายถึงข้อมูลที่มีอยู่บนเซิร์ฟเวอร์มันหมายถึงข้อมูลที่เบราว์เซอร์ของคุณในขณะนี้มีอยู่ในหน่วยความจำสำหรับหน้าปัจจุบัน จะไม่สามารถใช้งานได้ในหน้าอื่น ๆ จะไม่มีในเบราว์เซอร์อื่นและจะไม่สามารถใช้งานได้จากคอมพิวเตอร์เครื่องอื่น

ดังนั้นจึงไม่สมเหตุสมผลที่จะแปลงBlobURL เป็นURL "ปกติ" หากคุณต้องการ URL ธรรมดาคุณจะต้องส่งข้อมูลจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์และให้เซิร์ฟเวอร์นั้นพร้อมใช้งานเหมือนไฟล์ธรรมดา

เป็นไปได้ที่จะแปลงblob:URL เป็นdata:URL อย่างน้อยก็ใน Chrome คุณสามารถใช้คำขอ AJAX เพื่อ "ดึง" ข้อมูลจากblob:URL ได้ (แม้ว่าจะเป็นเพียงการดึงข้อมูลออกจากหน่วยความจำของเบราว์เซอร์ของคุณไม่ใช่การร้องขอ 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 ปกติที่สามารถแชร์ได้ ไม่ได้เจาะจงเฉพาะเบราว์เซอร์หรือเซสชันปัจจุบัน

อีกวิธีหนึ่งในการสร้าง data url จาก blob url อาจใช้ canvas

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 canvas.toDataURL ได้รับการสนับสนุนอย่างดีจากเบราว์เซอร์ (ยกเว้นเช่น <9 เสมอคือ <9)

สำหรับผู้ที่มาที่นี่กำลังมองหาวิธีดาวน์โหลดวิดีโอ / เสียง blob url คำตอบนี้ใช้ได้กับฉัน ในระยะสั้นที่คุณจะต้องไปหาไฟล์ .m3u8 * บนหน้าเว็บที่ต้องการผ่านChrome -> แท็บเครือข่ายและวางมันกลายเป็นผู้เล่น VLC

คำแนะนำอื่นจะแสดงวิธีการประหยัดกระแสกับ VLC เล่น

ดังที่คำตอบก่อนหน้านี้ได้กล่าวไปแล้วว่าไม่มีวิธีใดที่จะถอดรหัสกลับเป็น url ได้แม้ว่าคุณจะพยายามดูจากแผง Chrome devtools ก็ตาม url อาจยังคงเข้ารหัสเป็น blob

อย่างไรก็ตามเป็นไปได้ที่จะรับข้อมูลอีกวิธีหนึ่งในการรับข้อมูลคือใส่ลงในจุดยึดและดาวน์โหลดโดยตรง

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

แทรกสิ่งนี้ลงในหน้าที่มี URL หยดแล้วคลิกปุ่มคุณจะได้รับเนื้อหา

อีกวิธีหนึ่งคือการดักฟังการโทรของ ajax ผ่านพร็อกซีเซิร์ฟเวอร์จากนั้นคุณสามารถดู URL ของรูปภาพที่แท้จริงได้