URL.createObjectURL()

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似，下面是个人的一些理解，如有不正确的地方，欢迎指出：

主要区别
通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串

通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

执行时机：
createObjectURL是同步执行（立即的）
FileReader.readAsDataURL是异步执行（过一段时间）
内存使用：
createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
兼容性方面两个属性都兼容ie10以上的浏览器。

优劣对比：
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL

URL.createObjectURL()相关推荐

URL.createObjectURL图片预览
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><meta http ...
图片上传预览（URL.createObjectURL）
知识预备: 1. URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象.这个 URL 的生命周期和创建它的窗口中的 document 绑定 ...
blob/URL.createObjectURL()/reader.readAsDataURL/文件上传
文章目录 Blob和ArrayBuffer 实战一:上传图片预览实战二:以Blob URL加载网络视频前端实现文件下载(a标签实现文件下载避免直接打开问题) 先说结论方案一 a标签+downl ...
使用对象 url 显示图像（window.URL.createObjectURL的使用）
本示例使用对象 url 显示图像缩略图.此外, 它还显示其他文件信息, 包括它们的名称和大小. 呈现界面的 HTML 如下所显示: <input type="file" id ...
swagger测试导出报URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.
以上是使用的是火狐浏览器测试导出时报:URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads ...
URL.createObjectURL、URL.revokeObjectURL、Uint8Array、Blob使用详解
目录 URL.createObjectURL(obj) URL.revokeObjectURL(objURL) create|revokeObjectURL使用示例详解 arr=new Uint8Ar ...
[转] createObjectURL方法实现本地图片预览
ie6 可以直接显示本本地路径的图片如: <img src="file://c:/3.jpg" /> ~~~网上都说ie7就不支持这种文件系统路径的url,但测试 ...
js 获取图片url的Blob值并预览
js 获取图片url的Blob值并预览 1)使用 XMLHttpRequest 对象获取图片url的Blob值参考:https://www.cnblogs.com/tujia/p/6483255.h ...
url、base64、blob，三者之间的转化
对于vue项目,我们使用axiso来发送请求,如果传递二进制图片时出现乱码,这个是什么问题? 答: axios 默认返回的是 json 文本形式,二进制图片数据被强制转换成了 json 文本形式. 解 ...
button url图片显示不出来_哼！Vue如何在图片上传前使用vue-cropper进行剪切
首先package.json引入vue-cropper npm i vue-cropper -D template组件中加入上传表单,隐藏input表单,点击图片打开资源文件夹 < 然后继续在t ...

URL.createObjectURL()

URL.createObjectURL()相关推荐

最新文章

热门文章