Convertir l'URL du blob en URL normale

Question

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 un <img> 's src attribut.

Answer 1

Une URL qui a été créée à partir d'un JavaScript Blob ne peut pas être converti en une URL "normale".

A blob: L'URL 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 actuelle. Elle ne sera pas disponible sur d'autres pages, elle ne sera pas disponible dans d'autres navigateurs, et elle ne sera pas disponible à partir d'autres ordinateurs.

C'est pourquoi il n'est pas judicieux, en général, de convertir une Blob en une URL "normale". Si vous vouliez une URL ordinaire, vous devriez envoyer les données du navigateur à un serveur et faire en sorte que le serveur les rende disponibles comme un fichier ordinaire.

Il est possible de convertir un blob: dans un data: URL, du moins dans Chrome. Vous pouvez utiliser une requête AJAX pour "récupérer" les données à partir de l'URL. blob: (même s'il ne fait que l'extraire de la mémoire de votre navigateur, sans faire de demande 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 "normales" et peuvent être d'une taille problématique. Cependant, elles fonctionnent comme des URL normales en ce sens qu'elles peuvent être partagées ; elles ne sont pas spécifiques au navigateur ou à la session en cours.

Answer 2

Une autre façon de créer une url de données à partir d'une url de 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)

D'après ce que j'ai vu dans mdn, canvas.toDataURL est bien supporté par les navigateurs. (sauf ie<9, toujours ie<9)

Answer 3

Pour ceux qui sont venus ici à la recherche d'un moyen de télécharger un blob url vidéo / audio, cette réponse a fonctionné pour moi. En bref, il faut trouver un fichier *.m3u8 sur la page web désirée par le biais de Chrome -> Onglet Réseau et le coller dans un Lecteur VLC .

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

---

UPDATE :

Une autre façon de télécharger les vidéos à partir d'une url blob est d'utiliser le téléchargeur de masse et de joindre les fichiers ensemble.

Partie téléchargement de vidéos

1. Ouvrez l'onglet réseau dans les outils de développement de chrome

2. Rechargez la page web
3. Filtrer les fichiers .m3u8

4. Regardez tous les fichiers filtrés et trouvez la liste de lecture des fichiers '.ts'. Cela devrait ressembler à quelque chose comme ceci :

5. Vous devez extraire ces liens d'une manière ou d'une autre. Vous pouvez soit télécharger et éditer le fichier manuellement, soit utiliser toute autre méthode de votre choix. Comme vous pouvez le voir, ces liens sont très similaires, la seule chose qui diffère est le numéro de série de la vidéo : 's- 0 -v1-a1.ts', 's- 1 -v1-a1.ts' etc.

   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

et ainsi de suite jusqu'au dernier lien dans le fichier de liste de lecture .m3u8. Ces fichiers .ts sont en fait votre vidéo. Vous devez tous les télécharger.

6. Pour les téléchargements en masse, je préfère utiliser l'extension Simple Mass Downloader pour Chrome ( https://chrome.google.com/webstore/detail/simple-mass-downloader/abdkkegmcbiomijcbdaodaflgehfffed )

7. Si vous optez pour le Simple Mass Downloader, vous devez :

   a. Sélectionnez un modèle d'URL

b. Entrez votre lien dans le champ d'adresse avec une seule modification : la partie du lien qui change pour chaque vidéo suivante doit être remplacée par le modèle entre crochets [0:400] où 0 est le premier nom de fichier et 400 le dernier. Votre lien devrait donc ressembler à quelque chose comme ceci https://some-website.net/del/8cf.m3u8/s-[0:400]-v1-a1.ts .

Ensuite, cliquez sur le bouton Importer pour ajouter ces liens dans la liste des téléchargements de Mass Downloader.

c. L'action suivante peut vous demander le dossier de destination pour CHAQUE vidéo que vous téléchargez. Il est donc fortement recommandé de spécifier le dossier de téléchargement par défaut dans les paramètres de Chrome et de désactiver l'option Sélectionner la destination dans les paramètres de Chrome également. Cela vous fera gagner beaucoup de temps ! En outre, vous pouvez spécifier le dossier dans lequel ces fichiers seront placés :

c1. Cliquez sur la case à cocher Select All pour sélectionner tous les fichiers de la liste de téléchargement.

c2. Cliquez sur le bouton Télécharger dans le coin inférieur droit de la fenêtre de l'extension SMD. Vous accéderez à l'onglet suivant pour commencer le téléchargement.

c3. Appuyez sur Start selected. Ceci téléchargera automatiquement tous les vids dans le dossier de téléchargement.

C'est ça ! Attendez simplement que tous les fichiers soient téléchargés et vous pourrez les regarder via le lecteur VLC ou tout autre lecteur prenant en charge le format .ts. Cependant, si vous voulez avoir une seule vidéo à la place de celles que vous avez téléchargées, vous devez joindre toutes ces mini-vidéos ensemble.

Partie sur les vidéos de jonction

Comme je travaille sur Mac, je ne sais pas comment faire sous Windows. Si vous êtes un utilisateur de Windows et que vous voulez fusionner les vidéos, n'hésitez pas à chercher la solution Windows sur Google. Les étapes suivantes sont applicables pour Mac uniquement.

1. Ouvrez un terminal dans le dossier dans lequel vous souhaitez que la nouvelle vidéo soit enregistrée.
2. Type : cat et frappez space
3. Ouvrez le dossier où vous avez téléchargé votre .ts vidéo. Sélectionnez tous .ts les vidéos que vous voulez rejoindre (utilisez votre souris ou cmd+A )
4. Faites-les glisser et déposez-les dans le terminal
5. Hit space
6. Hit >
7. Hit Space
8. Tapez le nom de la nouvelle vidéo, par ex. my_new_video.ts . Veuillez noter que le format doit être le même que celui des vidéos originales, sinon la conversion prendra beaucoup de temps et peut même échouer !
9. Hit Enter . Attendez que le terminal termine le processus de connexion et regardez votre vidéo !

Answer 4

J'ai trouvé cette réponse aquí et je voulais le référencer car il semble beaucoup plus propre que la réponse acceptée :

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

Answer 5

Je suis très en retard à la fête.

Si vous voulez télécharger le contenu, vous pouvez simplement utiliser fetch maintenant

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