Convertir l'URL blob en URL normale


95

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.


1
même après avoir décodé l'URL, c'est toujours un localhostlien. Découvrez plutôt son lien public. (quel CDN utilisez-vous?)
Raptor

Je souhaite utiliser javascript.
Jacob

Utilisez le lien stackvoverflow .. et W3C Votre vrai problème sera de savoir comment le rendre indépendant de l'environnement dans
lequel

Existe-t-il un moyen de trouver l'URL publique à partir de l'adresse blob. C'est la seule valeur que j'ai.
Jacob

Réponses:


162

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.


14
Si les URL blob ne pointent pas vers les données du serveur, alors comment se fait-il que l'URL src des vidéos Youtube ressemble à: src = "blob: https% 3A // www.youtube.com / 44f26667-03f1-4978-9eed-af0cbf11dd67" (dans Chrome)
BHH1988

5
@ bhh1988 C'est une découverte très intéressante. Je ne suis pas sûr de ce qui se passe là-bas. Si j'essaie de récupérer leur URL blob src à l'aide d'un XMLHttpRequest, comme décrit dans cet article, aucun contenu n'est retourné. Je suppose que soit (a) ils ont généré une URL Blob vide à utiliser comme espace réservé lors de l'alimentation des données d'une autre source ou (b) le Blob agit en quelque sorte comme un proxy pour les données cryptées (via HTML5 Encrypted Media Extensions). Cependant, je ne suis pas sûr de savoir comment l'un ou l'autre de ces éléments pourrait être réalisé dans la pratique.
Jeremy

19
@ bhh1988 Il semble que la spécification des extensions de source multimédia autorise la création d'URL d' objets blob pour les flux multimédias gérés par JavaScript. Celles-ci ne correspondent pas aux données statiques comme les URL d'objets blob abordés dans cet article, d'où la différence de comportement, mais elles font toujours référence à des informations locales, pas directement aux données sur un serveur.
Jeremy

1
Hmm, ça sonne bien. C'est déroutant parce que l'URL semble réelle et intentionnelle, mais s'il ne s'agit que d'un espace réservé, la valeur de src ne devrait pas avoir d'importance.
bhh1988

3
J'obtiens une Not allowed to navigate top frame to data URL: data:text/plain;base64,...erreur. Je reçois les données, mais window.locationce n'est pas autorisé ...
loretoparisi

15

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)


17
Notez que cela ne s'applique bien sûr qu'aux données d'image, et certaines métadonnées peuvent être perdues!
minmaxavg

1
Cela crée un lien, mais si vous le suivez, vous n'obtiendrez qu'une boîte noire.
Antfish

@Antfish, ça ne devrait pas arriver, n'est-ce pas?
Pacerier


-5

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.


<a href="blob: example.com/xxxx-xxxx-xxxx-xxxx "download="abc.txt"> télécharger </a>. Cela devrait marcher. Quand il atteindra le href, il renommera le blob en abc.txt et téléchargera
P Satish Patro

1
Pourquoi les votes négatifs? avez-vous réellement essayé ce que j'ai dit?
ospider

Je n'ai pas voté contre. Je suis venu ici. Et, je pensais que cela fonctionnera. Je suis en faveur de ceci un petit peu
P Satish Patro
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.