图片 src 为二进制的处理

图片 src 为二进制的处理

4 years ago

source link: https://segmentfault.com/a/1190000040369037
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

使用 URL.createObjectURL() 方法。
使用 window.btoa() 方法。
使用 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