Convertir l'URL blob en URL normale

Ma page génère une URL comme celle-ci: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Comment puis-je la convertir en une adresse normale?

Je l' utilise comme <img>de » srcl'attribut.

Une URL créée à partir d'un JavaScript Blobne peut pas être convertie en une URL «normale».

Une blob:URL ne fait pas référence aux données existant sur le serveur, elle fait référence aux données que votre navigateur a actuellement en mémoire, pour la page en cours. Il ne sera pas disponible sur d'autres pages, il ne sera pas disponible dans d'autres navigateurs et il ne sera pas disponible à partir d'autres ordinateurs.

Par conséquent, il n'a pas de sens, en général, de convertir une BlobURL en une URL "normale". Si vous vouliez une URL ordinaire, vous devrez envoyer les données du navigateur à un serveur et demander au serveur de les rendre disponibles comme un fichier ordinaire.

Il est possible de convertir une blob:URL en data:URL, au moins dans Chrome. Vous pouvez utiliser une requête AJAX pour "récupérer" les données de l' blob:URL (même si cela ne fait que les extraire de la mémoire de votre navigateur, sans faire de requête HTTP).

Voici un exemple:

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:Les URL ne correspondent probablement pas à ce que vous entendez par «normal» et peuvent être problématiques. Cependant, ils fonctionnent comme des URL normales en ce sens qu'ils peuvent être partagés; ils ne sont pas spécifiques au navigateur ou à la session en cours.

une autre façon de créer une URL de données à partir de l'URL blob peut être d'utiliser 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)

comme ce que j'ai vu dans mdn, canvas.toDataURL est bien pris en charge par les navigateurs. (sauf ie <9, toujours ie <9)

Pour ceux qui sont venus ici à la recherche d'un moyen de télécharger une vidéo / audio d'url blob, cette réponse a fonctionné pour moi. En bref, vous devrez trouver un fichier * .m3u8 sur la page Web souhaitée via Chrome -> onglet Réseau et le coller dans un lecteur VLC .

Un autre guide vous montre comment enregistrer un flux avec le lecteur VLC .

Comme la réponse précédente l'a dit, il n'y a aucun moyen de le décoder en url, même lorsque vous essayez de le voir à partir du panneau Chrome devtools, l'URL peut toujours être codée en tant que blob.

Cependant, il est possible d'obtenir les données, une autre façon d'obtenir les données est de les mettre dans une ancre et de les télécharger directement.

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

Insérez ceci dans la page contenant l'URL du blob et cliquez sur le bouton, vous obtenez le contenu.

Une autre façon est d'intercepter l'appel ajax via un serveur proxy, puis vous pouvez afficher la véritable URL de l'image.