我对blob URL有很多问题.
我src在YouTube上搜索视频标签,我发现该视频src如下:
src="blob:https://crap.crap"
我打开了src视频中的blob URL,它给出了一个错误,我无法打开,但正在处理src标签.这怎么可能？
要求:
我正在编写一个Web应用程序,生成一个用户可以下载的潜在大文本文件,所有处理都在浏览器中完成.到目前为止,我能够以小块的形式读取超过1 GB的文件,处理每个块,逐步生成大量输出文件,并将增长的输出存储在IndexedDB中.我更天真的尝试将所有结果保存在内存中,然后在最后将它们序列化为文件,导致所有浏览器崩溃.
我的问题是双重的:
我可以追加到IndexedDB中的条目(字符串或数组)而不先将整个内容读入内存吗？现在,这个:
task.dbInputWriteQueue.push(output);
var transaction = db.transaction("files", "readwrite");
var objectStore = transaction.objectStore("files");
var request = objectStore.get(file.id);
request.onsuccess = function()
{
request.results += nextPartOfOutput
objectStore.put(request.results);
};
输出开始变大后导致崩溃.我可以在数据库中写一堆小条目,但是后来我不得不将它们全部读入内存,以便将它们连接起来.参见我的问题的第2部分......
我可以创建一个数据对象URL来引用IndexedDB中的值而不将该值加载到内存中吗？对于小字符串我可以做:
var url = window.URL.createObjectURL(new Blob([myString]), {type: 'text/plain'});
但对于大字符串,这并不太好.实际上,它在加载字符串之前崩溃了.似乎使用get()IndexedDB的大读取导致Chrome至少崩溃(甚至开发人员工具崩溃).
如果我使用Blob而不是字符串会更快吗？这种转换便宜吗？
基本上我需要一种方法,使用JavaScript,将一个非常大的文件写入磁盘,而不是在任何一点将整个内容加载到内存中.我知道你可以提供createObjectURL一个文件,但这在我的情况下不起作用,因为我正在从用户提供的文件中生成一个新文件.
我对这个问题有类似的问题(Javascript:导出大型文本/ csv文件导致Google Chrome崩溃):
我想节省创建的数据excelbuilder.js的EB.createFile()功能.如果我将文件数据作为href链接的属性值,它就可以工作.但是,当数据很大时,它会崩溃Chrome浏览器.代码是这样的:
//generate a temp <a /> tag
var link = document.createElement("a");
link.href = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' + encodeURIComponent(data);
link.style = "visibility:hidden";
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
我使用excelbuilder.js创建数据的代码如下:
var artistWorkbook = EB.createWorkbook();
var albumList = artistWorkbook.createWorksheet({name: 'Album List'});
albumList.setData(originalData);
artistWorkbook.addWorksheet(albumList);
var data = EB.createFile(artistWorkbook);
正如类似问题的答案(Javascript:导出大型文本/ csv文件导致Google Chrome崩溃)所示,需要创建一个blob.
我的问题是,文件中保存的内容不是可以由Excel打开的有效Excel文件.我用来保存的代码blob是这样的:
var blob = new Blob(
[data],
{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,"}
);
// Programatically create a link and click it:
var a …我试图通过缺乏不同的描述来实现离线媒体上下文.
这个概念是创造1秒Blob的录制媒体,具有的能力
Blobs独立播放1秒HTMLMediaElementBlobs 播放完整的媒体资源问题是,一旦Blobs被连接起来,媒体资源就不会HTMLMedia使用a Blob URL或者在元素上播放MediaSource.
创建的Blob URL只播放连接Blob的1秒.MediaSource抛出两个例外
DOMException: Failed to execute 'addSourceBuffer' on 'MediaSource': The MediaSource's readyState is not 'open'
和
DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
如何正确编码连接的Blobs或以其他方式实现变通方法以将媒体片段作为单个重组媒体资源播放？
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
const src = "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4";
fetch(src)
.then(response => response.blob())
.then(blob => …鉴于此代码(来自其他人):
var module = angular.module('myApp', []);
module.controller('MyCtrl', function ($scope){
$scope.json = JSON.stringify({a:1, b:2});
});
module.directive('myDownload', function ($compile) {
return {
restrict:'E',
scope:{ data: '=' },
link:function (scope, elm, attrs) {
function getUrl(){
return URL.createObjectURL(new Blob([JSON.stringify(scope.data)], {type: "application/json"}));
}
elm.append($compile(
'<a class="btn" download="backup.json"' +
'href="' + getUrl() + '">' +
'Download' +
'</a>'
)(scope));
scope.$watch(scope.data, function(){
elm.children()[0].href = getUrl();
});
}
};
});
小提琴示例可以在Chrome中下载.但是单击"下载"链接在IE11中没有任何作用.没有错误,没有警告,没有任何响应.
但根据这个它在IE10和11.1的支持.
是否有一些需要更改的IE安全设置或正在进行的操作？
尝试在Windows Edge(20.10240.16384,这是Microsoft提供的IE11 VM中的版本)中打开带有blob URL的新窗口时,我得到了一些奇怪的结果.
var xhr = new XMLHttpRequest();
xhr.open('POST', sourceUrl, true);
xhr.responseType = 'blob';
xhr.onload = function(e,form) {
if (this.status == 200) {
var blob = this.response;
var url = window.URL.createObjectURL(blob);
var w = window.open(url);
}
}
在线上
var w = window.open(url);
我得到一个"访问被拒绝"错误,它看起来与CORS捆绑在一起,这有点意义,因为它在技术上并不是同一个域.但是BLOB网址在技术上没有域名？
这是Edge中的错误吗？或者我做的事情不太对劲？此代码适用于IE,Chrome等.
经过很长一段时间,我使用了WebView.那么让我问一下我的阶段问题.
- 我有谷歌,Blob URL但我找到了解决方案或任何提示,所以我必须在这里发布问题.
- 我WebView在Android端加载一个网站.在他们的按钮上"SAVE-AS" to download an image.
- 当我尝试它 Google Chrome app是的它working fine并正确下载.
- webview在我的应用程序中DownloadListener
我使用Blob URL的情况相同
blob:http://-----cantshare-----.com/7e7452c8-62ca-4231-8640-0e9de715e073
下载手册 download nothing
检查我的代码
webview = (WebView) findViewById(R.id.webview);
WebSettings settings = webview.getSettings();
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setJavaScriptEnabled(true);
webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
final AlertDialog alertDialog = new AlertDialog.Builder(this).create();
final ProgressDialog progressBar = ProgressDialog.show(this, "WebView Example", "Loading...");
webview.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Log.i(TAG, "Processing webview url click...");
view.loadUrl(url); …我使用以下代码在 JavaScript 中保存文件：
var a = document.createElement('a');
a.href = URL.createObjectURL(new Blob(['SOME DATA']));
a.download = 'some.dat';
a.click();
我想在下载文件后撤销 URL（使用 URL.revokeObjectURL）。什么时候这样做是安全的？
我可以在调用后立即撤销它吗a.click()（这似乎有效，但我不确定它是否安全）？ina的点击事件监听器？有没有办法让点击事件监听器在默认操作之后运行？
将视频预加载为Blob，然后用于createObjectURL()创建BlobURL。该视频可在所有操作系统/浏览器上播放，但在iOS 10.3上尝试播放（承诺）以下消息时被拒绝：
NotSupportedError (DOM Exception 9): The operation is not supported.
如果将<video>src 切换到正常的视频网址，则它会正常播放。
获取Blob网址的代码：
fetch(videoURL)
.then(response => response.blob())
.then(window.URL.createObjectURL)
.then(console.log)
许多视频流网站，例如 youtube，似乎都有一个 blob url 作为他们的视频源。搜索，我无法弄清楚这是如何工作的。例如...
<video src="blob:https://www.youtube.com/ea375257-e9a8-4c3f-9cef-d8cf0f3ae53f"></video>
URL.createObjectURL()是获取 blob url 的唯一方法，它接受File、Blob或MediaSource对象。由于视频正在流式传输，因此必须不断添加新数据，而 File 和 Blob 似乎没有该选项，而 MediaSource 有，但在 developer.mozilla.org 上被标记为实验性功能...
我的问题是这个通过 blob url 流式传输视频的过程是如何工作的？
我必须将数据作为字符数组读取，或者更好地作为 blob url 中的 base64 字符串读取，以供以后处理。
例如，我blobUrl必须阅读的是
blob：https://localhost:44399/a4775972-6cc8-41a3-af64-1180d9941ab0
实际上，当点击链接时，该文件会在我的浏览器中预览。
尝试读取文件时
var blobUrl = document.getElementById("test").value;
var reader = new FileReader();
reader.readAsDataURL(blobUrl);
reader.onloadend = function ()
{
base64data = reader.result;
console.log(base64data);
}
我收到错误
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
我在这里做错了什么？
readAsDataURL实际上不接受 url 作为输入？
我该如何解决这个问题？
bloburls ×11
javascript ×9
blob ×2
android ×1
angularjs ×1
codec ×1
download ×1
filereader ×1
html5 ×1
html5-video ×1
image ×1
indexeddb ×1
ios ×1
jquery ×1
media ×1
media-source ×1
video ×1
webview ×1
xlsx ×1