文章目录
- 引言
- I 使用img标签来加载图片
-
- 1.1 使用img标签来加载图片
- 1.2 在加载图片时进行身份验证: sign/Authorization
- II 跨域请求中包含凭证
-
- 2.1 Fetch API在跨域请求中包含凭证
- 2.2 ajax在跨域请求中包含凭证
- III 显示图片方式
-
- 3.1 创建一个URL指向这个Blob对象
- 3.2 获取ArrayBuffer类型数据,再转码成base64
- 3.3 格式转化
引言
- Blob 全称为 binary large object ,表示原始的类似文件的数据。Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。
- 文件(File)接口提供有关文件的信息,并允许网页中的 JavaScript 访问其内容。实际上,File 对象是特殊类型的 Blob。
- FileReader 是一个异步 API,用于读取文件并提取其内容以供进一步使用。FileReader 可以将 Blob 读取为不同的格式。
- ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 的内容不能直接操作,只能通过 DataView 对象或 TypedArrray 对象来访问。这些对象用于读取和写入缓冲区内容。
- Object URL(MDN定义名称)又称Blob URL(W3C定义名称),是HTML5中的新标准。它是一个用来表示File Object 或Blob Object 的URL。
- Base64 是一种基于64个可打印字符来表示二进制数据的表示方法。Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。
需求:
- 后端返回特定的图片二进制流的时候,前端用blob容器接收二进制流,再通过 URL.createObjectURL(blob)生成一个临时blob展示