图片 src 为二进制的处理

XXHolic
English

引子

请求一张图片,返回的数据类型是二进制,要将图片显示出来。

图片 src 为二进制的处理

这种场景下,首先想到图片的 src 为 base64 的情况,了解 Base64 后,认为理论上可行。查询资料,发现了类似的疑惑问题,在回复中提供的解决方法有:

  1. 使用 URL.createObjectURL() 方法。
  2. 使用 window.btoa() 方法。
  3. 使用 FileReader 对象的 readAsDataURL() 方法。

下面分别进行验证。

方法

URL.createObjectURL()

URL 对象是用来解析、构造、规范和编码 URLs(统一资源定位符)。它有两个静态方法:

  • URL.createObjectURL():创建一个 DOMString,其中包含一个 URL,这个 URL 代表传递给这个方法的参数对象。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。
  • URL.revokeObjectURL():释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。浏览器在文档退出的时候会自动释放它们,但为了获得最佳性能和内存使用状况,当结束使用某个 URL 对象时,应该通过调用这个方法,来让浏览器知道不再需要保持这个文件的引用了。

这是测试示例,扫描二维码访问如下。

31-qrcode-createobjectURL

结果:方法可行。关于兼容性见 Can I use createObjectURL?

window.btoa()

window.btoa() 方法从 String 对象中创建一个 base-64 编码的 ASCII 字符串,其中字符串中的每个字符都被视为一个二进制数据字节。

与其对应的方法是 window.atob(),对用 base-64 编码过的字符串进行解码。

这是测试示例,扫描二维码访问如下。

31-qrcode-btoa

结果:出现了 InvalidCharacterError 异常,方法不可行。即使在文档中说的那样,先进行一次编码,也行不通。仔细想想这个方法的作用,是创建了新的字符串,并不是还原所有类型的原始数据。

这个方法的使用场景之一:使用此方法对可能导致通信问题的数据进行编码、传输,然后使用 atob() 方法再次对数据进行解码。

关于兼容性见 Can I use btoa?

readAsDataURL()

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。其拥有的方法 readAsDataURL(),开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。

这是测试示例,扫描二维码访问如下。

31-qrcode-filereader

结果:方法可行。关于兼容性见 Can I use FileReader?

参考资料

阅读 432

[链接]

210 声望
1.1k 粉丝
0 条评论
你知道吗?

[链接]

210 声望
1.1k 粉丝
宣传栏