CloudFlare Service Workers环境下请求图片生成base64的问题求解

btoa()仅支持对二进制字符串编码，原有代码直接传入Blob对象作为参数，不符合方法要求，因此无法得到正确结果。

const res = await fetch('https://cdn.cnn.com/cnnnext/dam/assets/211010073527-tyson-fury-exlarge-169.jpg')
if (!res.ok) throw new Error('图片资源请求失败')
// 直接读取为ArrayBuffer，不需要先转Blob
const imgBuffer = await res.arrayBuffer()
const uint8Array = new Uint8Array(imgBuffer)
// 拼接生成二进制字符串
let binaryStr = ''
for (let i = 0; i < uint8Array.length; i++) {
  binaryStr += String.fromCharCode(uint8Array[i])
}
// 生成带资源类型的base64 data URI，也可以按需只取btoa的返回值
const base64Result = `data:${res.headers.get('Content-Type')};base64,${btoa(binaryStr)}`
console.log(base64Result)

• 不需要先将响应转为Blob，直接读取为ArrayBuffer效率更高
• 如果仅需要纯base64编码内容，不需要可直接使用的data URI，只需要取btoa(binaryStr)的返回值即可
• 增加响应状态判断可以避免请求失败时后续逻辑抛出无意义报错

内容的提问来源于stack exchange，提问作者Tzook Bar Noy