问题标签 [createobjecturl]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
251 浏览

javascript - 卸载文档时将数据保存在 localStorage

我正在制作一个 chrome 扩展。用户可以将图像上传到扩展。保存我正在使用的图像的数据window.URL.createObjectURL()。问题是我想将有关图像的数据保存在 localStorage 中并再次使用它。但浏览器会在文档卸载时自动释放数据。即使文档已卸载,我如何使用数据?

0 投票
1 回答
1477 浏览

javascript - createObjectURL:使用 Blob 时在 Safari 中键入错误

在 HTML<video>对象中,我无法播放video.js-record库录制的视频。我检查了player.recordedData变量中返回的 Blob,并希望将其分配给文档中示例中提到的对象:

它失败并在此特定行出现错误:

未处理的承诺拒绝:TypeError:类型错误

--

(我已经在使用这个函数检查URLvs的使用:webkitURL

它似乎使用了正确的版本。)

0 投票
0 回答
137 浏览

javascript - blob URL 文件预览的自定义名称(如果已下载)

我正在使用 blob 在新选项卡中查看文件(无特定类型)。如果支持文件预览,则该文件是可查看的。但是,如果不支持该文件,则会下载该文件。是否可以使用自定义文件名而不是使用 createObjectURL 生成的随机名称来阻止它下载或下载?

0 投票
0 回答
215 浏览

javascript - 在带有背景和内容脚本的 Chrome 扩展程序中,何时可以调用 revokeObjectURL?

我正在使用 XMLHttpRequest 从本地文件系统上传文件。我正在遵循这个 SO 问题中提出的建议 - Pass large blob or file from chrome extension

这是在后台脚本中使用以下代码启动的

随着每个文件的上传,createObjectURL 用于创建一个新的 URL 对象。这些 URL 然后通过消息传递到内容脚本。内容脚本几乎相同,再次在文件上调用 createObjectURL 会产生新的 URL。然后将这些 URL 发送到网页,然后使用它们获取相应的文件。

每次完成此操作时,我都会在后台脚本中有效地创建一组 URL 对象,然后在内容脚本中创建一组新对象。

我应该什么时候调用 revokeObjectURL?

我认为对于在后台脚本中创建的 URL 对象,我只能在内容脚本检索文件并创建新的 URL 对象后调用 revokeObjectURL,对吗?其次,在文件安全上传到网页之前,我无法在内容脚本中创建的 URL 上调用 revokeObjectURL。

如果我是正确的,那么我可以在背景脚本在内容脚本中创建的 URL 上调用 revokeObjectURL 吗?

0 投票
1 回答
449 浏览

web - 在 IE11 的 Web Worker 中使用 URL.createObjectURL

我必须处理带有纯文本的大型数据集。我通过云将这些数据作为多个块获取,并使用网络工作者来处理和格式化数据。最后,我想把它下载到用户的本地存储中。因此,我使用FileSaver.js中定义的 Blob 和 saveAs()来授予跨浏览器兼容性。我想通过 URL.createObjectURL 发送对最终数据的引用,并将 URL 的 DOMString 传递回我的主线程。这在 Chrome 或 Edge 中运行良好,但 IE11 会产生一些问题。如果我 console.log 检索到的 URL,Chrome 和 Edge 会给我以下结果:

但是如果我在 IE11 中做同样的事情,我会得到以下结果:

这是一个示例代码:https ://jsfiddle.net/BoesingaGit/Lvx20uj8/6/ 我在这里不使用网络工作者,因为没有它也存在问题。可悲的是,saveAs 函数在 JSFiddle 中不起作用,但它在我的常规代码中起作用。在 Chrome 中可以下载 url,但在 IE 中不行。如果你看一下控制台,你会发现 Chrome 和 IE 中的 URL 是不同的。我猜这会导致在 IE 中下载失败。是否有原因,为什么在 IE 中没有引用我的网站?

谢谢。

0 投票
1 回答
1779 浏览

javascript - 在 JavaScript 中从字符串创建和下载文本文件:Blob/createObjectURL 与 encodeURIComponent

当我一直在寻找一种使用 JavaScript 从网站创建和下载文本文件的方法时,我找到了很多解决方案,但通常使用Blob/createObjectURL或 other encodeURIComponent,从我所见的情况来看,前者更受欢迎. 下面我展示了两个示例:请注意,两个函数的开头只有一两行不同(我在评论中指出)。

Blob/ createObjectURL:

encodeURIComponent

我想知道的是是否有任何理由更喜欢其中一个。到目前为止,我可以找到两个小的差异。首先,encodeURIComponent浏览器比createObjectURL. 其次,Blob似乎不支持编码。基于此,我会选择encodeURIComponent解决方案,但我想知道是否有原因导致我更频繁地看到Blob/解决方案。createObjectURL

编辑:上面的问题很笼统,所以让我针对我的具体用例缩小一点范围:我想让用户下载一个简单(utf-8)、相对较小(最大 100-200 kB)的文本(结果完成的自我评估测试)。不涉及真正的敏感数据,文件仅用于此目的,在客户端。尽管如此,我也欢迎更一般的答案,因为我对这些差异感到好奇。

0 投票
0 回答
540 浏览

jestjs - Openlayers 6 TypeError:URL.createObjectURL 不是函数

我有一个问题,在我将 openlayers 从 5.3.1 更新到 6.3.1 后,当我运行 test、jest 或 mocha 时,都显示错误“TypeError: URL.createObjectURL is not a function”,这是什么原因?

摩卡-Webpack:

笑话:

FAIL test/map.test.js ● 测试套件无法运行

0 投票
0 回答
362 浏览

reactjs - 视频流:使用 Blob URL,-Video Seek 未找到投射 404 文件

我是视频流服务的开发者/创建者,以便为我正在使用的电影提供服务

Blob Url 被创建并提供给 html5 视频元素

视频呈现后,blob URL 被撤销,以防止用户访问私人电影文件,但是当我尝试通过视频搜索时,我得到一个错误文件未找到的结果。

每次我寻找视频时是否需要重新创建 blob,或者我是否声明我的 blob 错误?

视频播放后:

短视频 SEEK 可以,因为更长的视频 1) 加载时间更长,2 不寻求

0 投票
0 回答
417 浏览

javascript - Blob 类型打开多种文件类型,例如 pdf 和 jpeg

我想通过单击我之前上传的文件在另一个浏览器选项卡中预览文件。它可以正常工作,{type:'application/pdf'}或者{type: 'image/jpeg'}但我需要它们。

有没有办法为 Blob 设置多个类型?当我从后端获取文档时,我不知道文件的类型。所以我无法检查文件是 pdf 还是 jpeg。

0 投票
0 回答
235 浏览

firefox - 在 Firefox 中第一次从对象 URL 下载总是失败

在 Firefox 中打开对象 URL 时,文件内容正确显示(在 PDF 查看器中),但“将页面另存为...”无法下载 blob。Firefox 中的下载列表将该文件列为“失败”。点击“重试”成功。

同样的方法在 Chrome 中也能成功运行。

不涉及后端(此时)。Blob 在前端正确检索并显示,但只有在重试时才能下载。

对象 URL 没有被撤销(我仍然可以在会话存储中看到 blob 的条目。它似乎总是第二次工作似乎指向我的时间问题,但我不知道在哪里看看这里失败的地方

blob 是使用 Angular 的 HttpClient 从后端的内容创建的:

这适用于 macOS Catalina (10.15.5) 上的当前 Firefox (78.0.2) 和 Firefox Developer Edition (79.0b9)。

它发生在具有原始内容处置的文件中,attachment或者inline尽管我怀疑它在转换为 blob 时无论如何都会丢失。

更新:

这是一个简化的最小示例,我在其中看到了相同的行为。我不知道如何Blob直接从 ASCII 二进制表示创建一个,因此该示例使用基于 base64 的字符串。但是,打开创建的对象 URL 的基本思想保持不变:

http://jsfiddle.net/4m8onzu6/9/

不幸的是,此示例仅在 Firefox 中以 PDF 文件的形式打开,而我的实际代码也适用于 Chrome...

我注意到选择正常的下载按钮(大多数用户可能使用)是可行的。只有当您尝试“将页面另存为...”时它才会首先失败,但可以通过单击“下载”列表中的“重试”来下载文件...