Am foarte problemele cu blob URL-ul.
Am fost în căutarea pentru src
de tag-ul video de pe YouTube și am găsit că videoclipul src
a fost ca:
src="blob:https://crap.crap"
Am deschis blob URL-ul care a fost în src
de film a dat o eroare. Pot't de a deschide link-ul, dar nu a fost de lucru cu src
tag. Cum este posibil acest lucru?
Cerințe:
Blob Url-uri (ref W3C, numele oficial) sau Obiect-Url-uri (ref. MDN și denumirea metodei) sunt folosite cu un Blob sau un Fișier obiect.
src="blob:https://rahat.rahat" am deschis blob url-ul care a fost în src de video-a dat o eroare si nu pot't deschis, dar a fost de lucru cu src tag-ul, cum este posibil?
Blob Url-uri pot fi generate intern de către browser. URL.createObjectURL()
va crea o referire specială la Blob sau Fișier obiect care mai târziu poate fi lansat folosind URL.revokeObjectURL()
. Aceste Url-uri pot fi folosite numai local în singură instanță a browser-ului și în aceeași sesiune (de exemplu. viața pagină/document).
Ce este blob url? de Ce este folosit?
Blob URL/Obiect URL-ul este un pseudo protocol pentru a permite Blob și obiecte de Fișier pentru a fi utilizate ca sursă de URL-ul pentru lucruri cum ar fi imagini, link-uri de download pentru date binare și așa mai departe.
De exemplu, nu puteți mână un obiect Imagine prime octet de date, deoarece nu ar ști ce să facă cu ea. Este nevoie, de exemplu, imagini (care sunt date binare) pentru a fi încărcate prin intermediul Url-uri. Acest lucru este valabil pentru orice care necesită o adresă URL sursă. În loc de încărcarea de date binare, apoi serveste-l înapoi prin intermediul unui URL este mai bine să utilizați un plus locală pas de a fi capabil de a accesa datele direct, fără a trece prin intermediul unui server.
Este, de asemenea, o alternativă mai bună la Date-URI, care sunt siruri de caractere codificate ca Base-64. Problema cu Date-URI este că fiecare char are doi octeți în JavaScript. Pe partea de sus a că 33% este adăugat datorită Base-64 de codare. Blobs sunt pur binare byte-matrice care nu are nici un semnificativ deasupra capului, ca Date-URI are, ceea ce le face mai repede și mai mici să se ocupe.
Pot face propria mea blob url-ul pe un server?
Nu, Blob Url-uri/Obiect Url-uri pot fi făcute numai pe plan intern în browser-ul. Puteți face Blobs și a obține Fișierul obiect prin intermediul File Reader API, deși BLOB înseamnă doar Obiect Mare Binar și este stocată ca byte-matrice. Un client poate solicita ca datele să fie trimise, fie ca ArrayBuffer sau ca o Pată de cerneală. Serverul trebuie să trimită datele la fel de pură date binare. Baze de date folosește adesea Blob pentru a descrie obiecte binare, precum și, în esență, vorbim de fapt despre byte-matrice.
dacă aveți apoi detalii Suplimentare
Ai nevoie pentru a îngloba date binare ca o PATĂ de cerneală obiect, apoi folosesc URL-ul.createObjectURL()` pentru a genera un local URL-ul pentru asta:
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
Rețineți că, URL
poate fi prefixate în webkit-browsere, astfel încât utilizarea:
var url = (URL || webkitURL).createObjectURL(...);
Ce este blob url? De ce este utilizat?
BLOB este doar o secvență de octeți. Browser-l recunoască drept flux de octeți. Este folosit pentru a obține flux de octeți de la sursă.
O Pată de cerneală obiect reprezintă un fișier ca obiect de imuabile, date brute. Blobs reprezintă date care nu't neapărat într-un JavaScript-format nativ. Fișierul de interfață se bazează pe Blob, moștenind blob funcționalitate și extinderea acesteia pentru a sprijini fișiere pe utilizator's sistem.
Pot face propria mea blob url-ul pe un server?
Da, se poate, sunt serveral moduri de a face deci, de exemplu, încercați http://php.net/manual/en/function.ibase-blob-echo.php
Citește mai mult pe
Această funcție Javascript urmărește să arate diferența între Blob Fișier API și Date API pentru a descărca o JSON file în browser-ul clientului:
/**
* 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));
Funcția este numit ca saveAsFile('out.json', jsonString);
. Se va crea un ByteStream imediat recunoscut de browser-ul, care va descărca fișierul generat direct, folosind Fișierul API URL.createObjectURL
.
În "altceva", este posibil pentru a vedea același rezultat obținut prin "href" element plus API de Date, dar acest lucru are mai multe limitări care Blob API nu are.
Am modificat soluție de lucru să se ocupe atât de caz.. atunci când video este încărcat și atunci când imaginea este încărcat .. sper ca va ajuta la ceva.
html
<input type="fișier" id="fileInput">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