Blob URL与Data URL

FileReader.readAsDataURL与URL.createObjectURL

URL.createObjectURL

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

在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

FileReader.readAsDataURL

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 [loadend](https://developer.mozilla.org/zh-CN/docs/Web/Reference/Events/loadend "/zh-CN/docs/Web/Reference/Events/loadend") 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

注意: Internet Explorer  10 之前的版本并不支持 FileReader() 。关于图片文件预览的兼容性解决方案，可以查看 crossbrowser possible solution for image preview 或者 this more powerful example 。

Blob URL和Data URL有什么区别?

• blob显示的形式blob:域名/e61c67e3-df3a-453a-8f41-df740c1f5faf ，dataURL的显示形式data:image/jpeg;base64,/9j/4AAQ...
• Blob URL的长度一般比较短，但Data URL因为直接存储图片base64编码后的数据，往往很长，如上图所示，浏览器在显示Data URL时使用了省略号（…）。当显式大图片时，使用Blob URL能获取更好的可能性。
• Blob URL可以方便的使用XMLHttpRequest获取源数据（xhr.responseType = 'blob'）。对于Data URL，并不是所有浏览器都支持通过XMLHttpRequest获取源数据的
• Blob URL 只能在当前应用内部使用，把Blob URL复制到浏览器的地址栏中，是无法获取数据的。Data URL相比之下，就有很好的移植性，你可以在任意浏览器中使用。
• Blob URL除了可以用作图片资源的网络地址，Blob URL也可以用作其他资源的网络地址，例如html文件、json文件等，为了保证浏览器能正确的解析Blob URL返回的文件类型，需要在创建Blob对象时指定相应的type。

使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小，否则无法读取图像文件。

参考：https://juejin.im/post/5cde6d...