什么是blob URL ?为什么要使用它？
我有很多关于blob URL的问题。
我在YouTube上搜索视频标签的src，发现视频的src是这样的：
src="blob:https://crap.crap"我打开了视频的src中的blob URL，它给出了一个错误。我无法打开该链接，但它可以使用src标记。这怎麽可能？
要求：
- 什么是blob URL？
- 为什么使用它？
- 我可以在服务器上创建自己的blob URL吗？
- 如果您有任何其他详细信息
回答 5
Stack Overflow用户
发布于 2015-06-17 10:38:28
Blob URL(参考W3C，官方名称)或对象URL(参考MDN和方法名)与Blob或File对象一起使用。
src=" blob :https://crap.crap“我打开了视频源码中的blob url，它给出了一个错误，我无法打开，但是我正在使用源码标签，这怎么可能？
Blob URL只能由浏览器在内部生成。URL.createObjectURL()将创建一个对Blob或File对象的特殊引用，稍后可以使用URL.revokeObjectURL()释放该引用。这些URL只能在浏览器的单个实例和同一会话中本地使用(即，页面/文档的生命周期)。
什么是blob url？
为什么要使用它？
Blob URL/Object URL是一种伪协议，允许Blob和File对象用作图像、二进制数据的下载链接等内容的URL源。
例如，您不能将Image对象的原始字节数据交给它，因为它不知道如何处理它。例如，它需要通过URL加载图像(这是二进制数据)。这适用于任何需要URL作为源的内容。与其上传二进制数据，然后通过URL返回它，不如使用额外的本地步骤，以便能够直接访问数据，而不需要通过服务器。
它也是Data-URI的一个更好的替代方案，后者是编码为Base-64的字符串。Data-URI的问题是在JavaScript中每个字符占用两个字节。最重要的是，由于Base-64编码，增加了33%。Blobs是纯二进制字节数组，不像Data-URI那样有任何显著的开销，这使得它们处理起来更快、更小。
我可以在服务器上创建自己的blob url吗？
不能，Blob URL/对象URL只能在浏览器内部创建。您可以通过File Reader API创建BLOB和获取文件对象，尽管BLOB仅表示二进制大object，并且存储为字节数组。客户端可以请求将数据作为ArrayBuffer或Blob发送。服务器应将数据作为纯二进制数据发送。数据库通常也使用Blob来描述二进制对象，本质上我们谈论的基本上是字节数组。
如果您有其他详细信息，请使用
您需要将二进制数据封装为BLOB对象，然后使用URL.createObjectURL()为其生成本地URL：
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请注意，在webkit-browsers中，URL可能是前缀，因此请使用：
var url = (URL || webkitURL).createObjectURL(...);Stack Overflow用户
发布于 2018-04-24 05:18:07
此Javascript函数旨在显示Blob文件应用编程接口和Data应用编程接口之间的差异，以便在客户端浏览器中下载JSON文件：
/**
* 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));
该函数的调用方式与saveAsFile('out.json', jsonString);类似。它将创建浏览器立即识别的ByteStream，并使用file API URL.createObjectURL直接下载生成的文件。
在else中，可以看到通过href元素和Data API获得的相同结果，但这有几个Blob API所没有的限制。
Stack Overflow用户
发布于 2018-06-23 04:33:33
我已经修改了工作解决方案来处理这两种情况。当上传视频和图片时..希望它能对你有所帮助。
HTML
<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>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('iamge');
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网址
https://stackoverflow.com/questions/30864573
复制相似问题
腾讯云开发者
