乐趣区

关于javascript:图片-src-为二进制的处理

jiezi

引子

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

  • Origin
  • My GitHub

图片 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 对象时，应该通过调用这个办法，来让浏览器晓得不再须要放弃这个文件的援用了。

这是测试示例，扫描二维码拜访如下。

后果： 办法可行 。对于兼容性见 Can I use createObjectURL?。

window.btoa()

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

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

这是测试示例，扫描二维码拜访如下。

后果： 呈现了 InvalidCharacterError 异样，办法不可行 。即便在文档中说的那样，先进行一次编码，也行不通。认真想想这个办法的作用，是创立了新的字符串，并不是还原所有类型的原始数据。

这个办法的应用场景之一：应用此办法对可能导致通信问题的数据进行编码、传输，而后应用 atob() 办法再次对数据进行解码。

对于兼容性见 Can I use btoa?。

readAsDataURL()

FileReader 对象容许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，应用 File 或 Blob 对象指定要读取的文件或数据。其领有的办法 readAsDataURL()，开始读取指定的 Blob 中的内容。一旦实现，result 属性中将蕴含一个 data: URL 格局的字符串以示意所读取文件的内容。

这是测试示例，扫描二维码拜访如下。

后果： 办法可行 。对于兼容性见 Can I use FileReader?。

参考资料

  • Blob
  • File
  • URL
  • btoa
  • FileReader
退出移动版