关于XHR中的responseType

关键字：responseType   Blob   ArrayBuffer

次关键字： html2canvas  白屏  Blob URL

一、关于responseType

前端里的XMLHttpRequest，通常后端返回给我们的数据格式是json，获取数据时直接res.json就可以。其实除此之外，还有其他的格式如： arraybuffer、blob等，我们可以通过设置responseType来指定响应的数据类型。

如果明确知道返回的二进制数据类型，可以把返回类型设为arraybuffer（一般后端返回的二进制原生字节是8位无符号整数的数组），因为这里涉及ArrayBuffer对象的读写。后面会详细介绍有关ArrayBuffer对象和其视图的读写。

针对后端返回图片流或文件流时，一般采取arraybuffer、blob这两个格式，我们可以通过以下方法进行读取：

读取Blob或者文件对象

    const reader = new FileReader()

    reader.onload = function() {

        const content = reader.result 

        console.log(content)

    }

    reader.readAsDataURL(response) 

读取ArrayBuffer 

let bytes = new Uint8Array(response)  

let data = ""

for (let i = 0; i < bytes.byteLength; i++) { 

    data += String.fromCharCode(bytes[i])

} 

const base64 = "data:image/png;base64," + window.btoa(data))

参考MDN文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

二、关于Blob和ArrayBuffer

1、Blob

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

1)  通过window.URL.createObjectURL方法可以把一个blob转化为一个Blob URL，用做图片显示的链接。

在使用html2canvas截屏的场景中，由于每次调用html2canvas合成图片时，都会对截屏区域中的图片资源进行再次加载，为避免网络阻塞等情况导致图片下载图片缓慢或失败进而使得截屏出现空白的情况，可以先将图片转换为Blob URL，此时浏览器会将此URL保存在内存中，保证了再次加载图片时不必发起网络请求。

const img = new Image()

img.setAttribute('crossOrigin', 'Anonymous')

img.src = imgUrl

img.onload = () => {

    const canvas = document.createElement('canvas')

    const ctx = canvas.getContext('2d')

    canvas.width = img.width

    canvas.height = img.height

    ctx.drawImage(img, 0, 0)

    canvas.toBlob((blob) => { const blobURL = URL.createObjectURL(blob) }

}

2)  本地读取文件内容

读取Blob或者文件对象并转化为其他格式的数据，可借助FileReader对象的API进行操作

FileReader.readAsText(Blob)：将Blob转化为文本字符串FileReader.readAsArrayBuffer(Blob)： 将Blob转为ArrayBuffer格式数据FileReader.readAsDataURL(): 将Blob转化为Base64格式的Data URL

2、ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为“byte array”。你不能直接操作 ArrayBuffer 的内容，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray和DataView，前者的数组成员都是同一个数据类型，后者的数组成员可以是不同的数据类型。)来读写，视图的作用是以指定格式解读二进制数据。

参考链接： https://www.cnblogs.com/jixiaohua/p/10714662.html