Saya mengalami sedikit masalah dengan gumpalan URL.
Saya sedang mencari src
dari tag video di YouTube dan saya menemukan bahwa video src
seperti:
src="blob:https://crap.crap"
Aku membuka gumpalan URL yang ada di src
video itu memberi sebuah kesalahan. Saya dapat't membuka link, tapi itu bekerja dengan src
tag. Bagaimana mungkin ini terjadi?
Persyaratan:
Gumpalan Url (ref W3C, nama resmi) atau Objek-Url (ref. MDN dan nama metode) yang digunakan dengan Blob atau File objek.
src="blob:https://omong kosong.omong kosong" saya membuka gumpalan url yang ada di src dari video itu memberi sebuah kesalahan dan saya dapat't terbuka, tetapi bekerja sama dengan src tag bagaimana mungkin?
Gumpalan Url yang hanya dapat dihasilkan secara internal oleh browser. URL.createObjectURL()
akan membuat referensi khusus untuk Blob atau File objek yang kemudian dapat dilepaskan dengan menggunakan URL.revokeObjectURL()
. Url ini hanya dapat digunakan secara lokal dalam satu contoh dari browser dan di sesi yang sama (ie. kehidupan halaman/dokumen).
Apa adalah gumpalan url? Mengapa digunakan?
Gumpalan URL/Objek URL adalah pseudo protokol untuk memungkinkan Blob dan File objek yang akan digunakan sebagai sumber URL untuk hal-hal seperti gambar, link download untuk data biner dan sebagainya.
Misalnya, anda tidak dapat tangan Gambar objek mentah byte-data seperti itu tidak akan tahu apa yang harus dilakukan dengan itu. Hal ini membutuhkan untuk contoh gambar (yang merupakan data biner) untuk dapat dimuat melalui Url. Hal ini berlaku untuk apa pun yang membutuhkan sebuah URL sebagai sumber. Bukannya meng-upload data biner, kemudian sajikan kembali melalui URL itu adalah lebih baik untuk menggunakan tambahan lokal langkah untuk dapat mengakses data secara langsung tanpa melalui server.
Ini juga merupakan alternatif yang lebih baik untuk Data-URI adalah string yang dikodekan sebagai Base-64. Masalah dengan Data-URI adalah bahwa setiap char membutuhkan dua byte dalam JavaScript. Di atas itu 33% ditambahkan karena Base-64 encoding. Gumpalan yang murni biner byte-array yang tidak memiliki overhead yang signifikan karena Data-URI tidak, yang membuat mereka lebih cepat dan lebih kecil untuk pegangan.
saya Dapat membuat saya sendiri gumpalan url pada server?
Tidak, Gumpalan Url/Objek Url yang hanya dapat dilakukan secara internal di browser. Anda dapat membuat Gumpalan dan mendapatkan objek File melalui File Reader API, meskipun GUMPALAN hanya berarti Binary Large OBject dan disimpan sebagai byte-array. Klien dapat meminta data yang akan dikirim sebagai ArrayBuffer atau sebagai Gumpalan. Server harus mengirimkan data-data sebagai data biner murni. Database sering menggunakan Blob untuk menggambarkan objek biner juga, dan pada dasarnya kita berbicara pada dasarnya tentang byte-array.
jika anda memiliki maka Tambahan detail
Anda perlu untuk merangkum data biner sebagai GUMPALAN objek, maka menggunakan URL.createObjectURL()
untuk menghasilkan lokal URL ini:
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
Perhatikan bahwa URL
dapat diawali di webkit browser, jadi gunakan:
var url = (URL || webkitURL).createObjectURL(...);
Apa gumpalan url? Mengapa digunakan?
BLOB adalah urutan byte. Browser mengenalinya sebagai aliran byte. Hal ini digunakan untuk mendapatkan byte stream dari sumber.
Gumpalan object merupakan file-seperti objek abadi, data mentah. Gumpalan mewakili data yang isn't harus dalam JavaScript-format asli. File antarmuka didasarkan pada Gumpalan, mewarisi gumpalan fungsi dan mengembangkannya untuk mendukung file pada pengguna's sistem.
Saya dapat membuat saya sendiri gumpalan url pada server?
Ya, anda dapat ada beberapa cara untuk melakukannya, misalnya mencoba http://php.net/manual/en/function.ibase-blob-echo.php
Baca lebih lanjut di
Ini fungsi Javascript dimaksudkan untuk menunjukkan perbedaan antara Blob File API dan *Data * API untuk men-download JSON** file di browser klien:
/**
* 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));
Fungsi ini disebut seperti saveAsFile('keluar.json', jsonString);
. Itu akan membuat ByteStream segera diakui oleh browser yang akan men-download file yang dihasilkan langsung menggunakan File API URL.createObjectURL
.
Pada yang lain
, itu adalah mungkin untuk melihat hasil yang sama diperoleh melalui href
elemen ditambah Data API, tapi hal ini memiliki beberapa keterbatasan yang Gumpalan API belum.
Saya telah dimodifikasi kerja solusi untuk menangani kedua kasus.. ketika video ini di-upload dan ketika gambar di-upload .. berharap ini akan membantu beberapa.
html
<input type="file" 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