Blob-URL converteren naar normale URL

Mijn pagina genereert een URL zoals deze: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Hoe kan ik deze converteren naar een normaal adres?

Ik gebruik het als <img>‘s srcattribuut.


Antwoord 1, autoriteit 100%

Een URL die is gemaakt op basis van een JavaScript Blobkan niet worden geconverteerd naar een “normale” URL.

Een blob:URL verwijst niet naar gegevens die op de server aanwezig zijn, het verwijst naar gegevens die uw browser momenteel in het geheugen heeft voor de huidige pagina. Het zal niet beschikbaar zijn op andere pagina’s, het zal niet beschikbaar zijn in andere browsers en het zal niet beschikbaar zijn op andere computers.

Daarom heeft het in het algemeen geen zin om een ​​BlobURL om te zetten in een “normale” URL. Als u een gewone URL wilde, zou u de gegevens van de browser naar een server moeten sturen en de server deze als een gewoon bestand beschikbaar moeten stellen.

Het is mogelijk om een ​​blob:URL om te zetten in een data:URL, in ieder geval in Chrome. U kunt een AJAX-verzoek gebruiken om de gegevens van de blob:-URL op te halen (ook al haalt het deze eigenlijk gewoon uit het geheugen van uw browser en maakt het geen HTTP-verzoek).

Hier is een voorbeeld:

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();

Snippet uitvouwen


Antwoord 2, autoriteit 8%

een andere manier om een ​​gegevens-URL te maken van de blob-URL is mogelijk met 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)

zoals ik in mdn zag, wordt canvas.toDataURL goed ondersteund door browsers. (behalve ie<9, altijd ie<9)


Antwoord 3, autoriteit 6%

Voor degenen die hier kwamen op zoek naar een manier om een ​​blob-url-video/audio te downloaden, dit antwoord werktevoor mij. Kortom, u moet een *.m3u8-bestand op de gewenste webpagina vinden via Chrome-> Tabblad Netwerken plak het in een VLC-speler.

Een andere handleiding laat zien hoe je een stream opslaat met de VLC Player.


UPDATE:

Een alternatieve manier om de video’s van een blob-url te downloaden, is door de massadownloader te gebruiken en de bestanden samen te voegen.

Onderdeel video’s downloaden

  1. Open netwerktabblad in chrome dev tools

  1. De webpagina opnieuw laden
  2. Filter .m3u8-bestanden

  1. Bekijk alle gefilterde bestanden en vind de afspeellijst met de ‘.ts’-bestanden. Het zou er ongeveer zo uit moeten zien:

  1. Je moet die links op de een of andere manier extraheren. Download en bewerk het bestand handmatig OF gebruik een andere methode die u wilt. Zoals je kunt zien, lijken die links erg op elkaar, het enige dat verschilt is het serienummer van de video: ‘s-0-v1-a1.ts’, ‘s-1 -v1-a1.ts’ enz.

    https://some-website.net /del/8cf.m3u8/s-0-v1-a1.ts

    https://some-website.net /del/8cf.m3u8/s-1-v1-a1.ts

    https:/ /some-website.net/del/8cf.m3u8/s-2-v1-a1.ts

en zo verder tot de laatste link in het .m3u8-afspeellijstbestand. Deze .ts-bestanden zijn eigenlijk je video. Je moet ze allemaal downloaden.

  1. Voor bulkdownloads gebruik ik bij voorkeur de Simple Mass Downloader-extensie voor Chrome (https://chrome.google.com/webstore/detail/simple-mass-downloader/abdkkegmcbiomijcbdaodaflgehfffed)

  2. Als u zich aanmeldt voor de Simple Mass Downloader, moet u:

    a. Selecteer een patroon-URL

b. Voer uw link in het adresveld in met slechts één wijziging: dat deel van de link dat voor elke volgende video verandert, moet worden vervangen door het patroon tussen vierkante haken [0:400] waarbij 0 de eerste bestandsnaam is en 400 de de laatste. Dus je link zou er ongeveer zo uit moeten zien https://some-website.net/del/8cf.m3u8/s-[0:400]-v1-a1.ts.

Druk daarna op de knop Importeren om deze links toe te voegen aan de downloadlijst van Mass Downloader.

c. De volgende actie kan u vragen om de doelmap voor ELKE video die u downloadt. Het wordt dus ten zeerste aanbevolen om de standaard downloadmap in Chrome-instellingen op te geven en de optie Bestemming selecteren ook in Chrome-instellingen uit te schakelen. Dit zal u veel tijd besparen! Daarnaast wil je misschien dat je de map specificeert waar deze bestanden naar toe zullen gaan:

c1. Klik op Alles selecteren om alle bestanden uit de downloadlijst te selecteren.

c2. Klik op de knop Downloaden in de rechterbenedenhoek van het SMD-extensievenster. U gaat naar het volgende tabblad om te beginnen met downloaden

c3. Druk op Start geselecteerd. Hierdoor worden alle video’s automatisch naar de downloadmap gedownload.

Dat is het! Wacht gewoon tot alle bestanden zijn gedownload en je kunt ze bekijken via de VLC Player of een andere speler die het .ts-formaat ondersteunt. Als je echter één video wilt hebben in plaats van de video’s die je hebt gedownload, moet je al deze minivideo’s samenvoegen

Deelnemen aan video’s deel

Omdat ik op Mac werk, weet ik niet hoe je dit op Windows zou doen. Als u de Windows-gebruiker bent en u wilt de video’s samenvoegen, google dan gerust naar de Windows-oplossing. De volgende stappen zijn alleen van toepassing op Mac.

  1. Open Terminal in de map waarin u de nieuwe video wilt opslaan
  2. Type: caten druk op Space
  3. Open de map waar je je .ts-video hebt gedownload. Selecteer alle .ts-video’s waaraan je wilt deelnemen (gebruik je muis of cmd+A)
  4. Sleep ze naar de terminal
  5. Druk op Space
  6. Druk op >
  7. Druk op Space
  8. Typ de naam van de nieuwe video, bijv. my_new_video.ts. Houd er rekening mee dat het formaat hetzelfde moet zijn als in de originele video’s, anders duurt het lang om te converteren en kan het zelfs mislukken!
  9. Druk op Enter. Wacht tot de terminal het deelnameproces heeft voltooid en geniet van het bekijken van je video!

Antwoord 4, autoriteit 2%

Vind dit antwoord hieren wilde ernaar verwijzen omdat het veel schoner lijkt dan het geaccepteerde antwoord:

function blobToDataURL(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onload = function(e) {callback(e.target.result);}
  fileReader.readAsDataURL(blob);
}

Antwoord 5

Ik ben erg laat op het feest.

Als je de inhoud wilt downloaden, kun je gewoon fetchnu gebruiken

fetch(blobURL)
  .then(res => res.blob())
  .then(blob => /*do what you want with the blob here*/)

Antwoord 6

Hier de oplossing:

       let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
        let videoURL = window.URL.createObjectURL(blob);
        const blobF = await fetch(videoURL).then(res => res.blob())

Antwoord 7

Zoals het vorige antwoord al zei, is er geen manier om het terug te decoderen naar url, zelfs als u het probeert te zien vanuit het chrome devtools-paneel, kan de url nog steeds gecodeerd zijn als blob.

Het is echter mogelijk om de gegevens op te halen, een andere manier om de gegevens te verkrijgen is door ze in een anker te plaatsen en ze direct te downloaden.

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

Voeg dit in op de pagina met de blob-url en klik op de knop, je krijgt de inhoud.

Een andere manier is om de ajax-oproep te onderscheppen via een proxyserver, dan zou je de echte afbeeldings-url kunnen bekijken.

Other episodes