web-dev-qa-db-fra.com

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 adresse normale?

Je l'utilise comme attribut src de <img>.

javascripturlblob
77
Jacob

Une URL créée à partir de JavaScript Blob ne peut pas être convertie en une URL "normale".

Une URL blob: ne fait pas référence aux données qui existent sur le serveur, mais 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, ni dans d'autres navigateurs, ni sur d'autres ordinateurs.

Par conséquent, il n’a généralement aucun sens de convertir une URL Blob en une URL "normale". Si vous voulez une URL ordinaire, vous devez envoyer les données du navigateur à un serveur et le faire en sorte qu'il soit disponible comme un fichier ordinaire.

Il est possible de convertir une URL blob: en une URL data:, au moins sous Chrome. Vous pouvez utiliser une requête AJAX pour "extraire" les données de l'URL blob: (même s'il s'agit simplement de les extraire de la mémoire de votre navigateur, sans émettre 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 sont probablement pas ce que vous entendez par "normal" et peuvent être problématiques. Cependant, elles fonctionnent comme des URL normales dans la mesure où elles peuvent être partagées. ils ne sont pas spécifiques au navigateur ou à la session en cours.

136
Jeremy Banks

un autre moyen de créer une URL de données à partir d’URL blob consiste à 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)

15
Leooonard

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

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

1
Gasper J.