Qu'est-ce qu'une URL blob et pourquoi est-elle utilisée?
J'ai des problèmes avec l'URL blob.
Je recherchais src d'une balise vidéo sur YouTube et j'ai constaté que la vidéo src ressemblait à ceci:
src="blob:https://crap.crap"
J'ai ouvert l'URL de blob qui était dans src de la vidéo, il a donné une erreur. Je ne peux pas ouvrir le lien, mais cela fonctionnait avec la balise src. Comment est-ce possible?
Exigences:
- Qu'est-ce que l'URL blob?
- Pourquoi est-il utilisé?
- Puis-je créer ma propre URL de blob sur un serveur?
- Si vous avez des détails supplémentaires
Les URL de blob (réf W3C , nom officiel) ou les URL d'objet (ref. MDN et nom de la méthode) sont utilisées avec un Blob ou un Fichier objet.
src = "blob: https: //crap.crap " J'ai ouvert l'URL du blob qui était dans src de la vidéo, cela a donné une erreur et je ne peux pas l'ouvrir, mais je travaillais avec la balise src. est possible?
Les URL de blob ne peuvent être générées qu'en interne par le navigateur. URL.createObjectURL() créera une référence spéciale à l'objet Blob ou File qui pourra être libérée ultérieurement à l'aide de URL.revokeObjectURL() . Ces URL ne peuvent être utilisées que localement dans l'instance unique du navigateur et dans la même session (c'est-à-dire la vie de la page/du document).
Quelle est l'URL blob?
Pourquoi est-il utilisé?
Blob URL/Object URL est un pseudo protocole permettant aux objets Blob et Fichier d'être utilisés comme source d'URL pour des éléments tels que des images, des liens de téléchargement pour des données binaires, etc.
Par exemple, vous ne pouvez pas donner un octet de données brutes à un objet Image, car il ne saurait pas quoi en faire. Il faut par exemple que les images (qui sont des données binaires) soient chargées via des URL. Cela s'applique à tout ce qui nécessite une URL en tant que source. Au lieu de télécharger les données binaires, puis de les restituer via une URL, il est préférable d’utiliser une étape locale supplémentaire pour pouvoir accéder aux données directement sans passer par un serveur.
C'est également une meilleure alternative aux données-URI, qui sont des chaînes codées avec Base-64 . Le problème avec Data-URI est que chaque caractère prend deux octets en JavaScript. En plus de cela, 33% sont ajoutés en raison du codage Base-64. Les blobs sont des tableaux d'octets binaires purs qui ne subissent pas de surcharge significative comme le fait Data-URI, ce qui les rend plus rapides et plus faciles à gérer.
Puis-je créer mon propre URL de blob sur un serveur?
Non, les URL d'objets blob/URL d'objet ne peuvent être créées qu'en interne dans le navigateur. Vous pouvez créer des objets Blobs et obtenir un objet File via l’API du lecteur de fichiers, même si BLOB signifie simplement Binary Large OBject et est stocké sous forme de tableaux d’octets. Un client peut demander que les données soient envoyées en tant que ArrayBuffer ou en tant que blob. Le serveur doit envoyer les données sous forme de données binaires pures. Les bases de données utilisent souvent Blob pour décrire également des objets binaires, et nous parlons essentiellement de tableaux de byte.
si vous avez alors des détails supplémentaires
Vous devez encapsuler les données binaires en tant qu’objet BLOB, puis utilisez URL.createObjectURL() pour générer une URL locale:
var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
URL.revokeObjectURL(this.src); // clean-up memory
document.body.appendChild(this); // add image to DOM
}
img.src = url; // can now "stream" the bytes
Notez que URL peut être préfixé dans les navigateurs webkit, utilisez donc:
var url = (URL || webkitURL).createObjectURL(...);
Cette fonction Javascript prétend montrer la différence entre les API Blob Fichier et Données pour télécharger un fichier JSON dans le navigateur du client:
/**
* Save a text as file using HTML <a> temporary element and Blob
* @author Loreto Parisi
*/
var saveAsFile = function(fileName, fileContents) {
if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob
var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'});
var downloadLink = document.createElement("a");
downloadLink.download = fileName;
if (window.webkitURL != null) {
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = document.body.removeChild(event.target);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
} else { // Alternative 2: using Data
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.onclick = document.body.removeChild(event.target);
pp.click();
}
} // saveAsFile
/* Example */
var jsonObject = {"name": "John", "age": 30, "car": null};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));La fonction s'appelle comme saveAsFile('out.json', jsonString);. Il créera un ByteStream immédiatement reconnu par le navigateur qui téléchargera le fichier généré directement à l'aide de l'API de fichier URL.createObjectURL.
Dans elsename__, il est possible de voir le même résultat obtenu via l'élément hrefplus l'API de données, mais l'API Blob présente plusieurs limitations.
Qu'est-ce que l'URL blob? Pourquoi est-il utilisé?
BLOB est juste une séquence d'octets. Le navigateur le reconnaît comme un flux d'octets. Il est utilisé pour obtenir un flux d'octets depuis la source.
Un objet Blob représente un objet de type fichier contenant des données brutes immuables. Les blobs représentent des données qui ne sont pas nécessairement dans un format natif JavaScript. L'interface de fichier est basée sur Blob. Elle hérite de la fonctionnalité de blob et l'a développée pour prendre en charge des fichiers sur le système de l'utilisateur.
Puis-je créer ma propre URL de blob sur un serveur?
Oui, vous pouvez utiliser plusieurs méthodes, par exemple, essayez http://php.net/manual/en/function.ibase-blob-echo.php
En savoir plus sur
J'ai modifié la solution de travail pour gérer à la fois le cas .. lorsque la vidéo est téléchargée et lorsque l'image est téléchargée .. espérons que cela aidera certains.
durée html:
Javascript
var fileEl = document.querySelector("input");
fileEl.onchange = function(e) {
var file = e.target.files[0]; // selected file
if (!file) {
console.log("nothing here");
return;
}
console.log(file);
console.log('file.size-' + file.size);
console.log('file.type-' + file.type);
console.log('file.acutalName-' + file.name);
let start = performance.now();
var mime = file.type, // store mime for later
rd = new FileReader(); // create a FileReader
if (/video/.test(mime)) {
rd.onload = function(e) { // when file has read:
var blob = new Blob([e.target.result], {
type: mime
}), // create a blob of buffer
url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
video = document.createElement("video"); // create video element
//console.log(blob);
video.preload = "metadata"; // preload setting
video.addEventListener("loadedmetadata", function() { // when enough data loads
console.log('video.duration-' + video.duration);
console.log('video.videoHeight-' + video.videoHeight);
console.log('video.videoWidth-' + video.videoWidth);
//document.querySelector("div")
// .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
(URL || webkitURL).revokeObjectURL(url); // clean up
console.log(start - performance.now());
// ... continue from here ...
});
video.src = url; // start video load
};
} else if (/image/.test(mime)) {
rd.onload = function(e) {
var blob = new Blob([e.target.result], {type: mime}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
console.log('image');
console.dir('this.height-' + this.height);
console.dir('this.width-' + this.width);
URL.revokeObjectURL(this.src); // clean-up memory
console.log(start - performance.now());// add image to DOM
}
img.src = url;
};
}
var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
rd.readAsArrayBuffer(chunk); // read file object
};
jsFiddle Url