将 XMLHTTPResponseText 解码为 dataUrl，无需在服务器端进行基本编码

如何解决将 XMLHTTPResponseText 解码为 dataUrl，无需在服务器端进行基本编码

如何在客户端将 XMLHTTPRequest 的纯文本响应转换为 dataUrl？

图像数据正在从服务器发送到 Iframe，检索数据的唯一选项是来自 GET 请求的默认编码数据。* 我对服务器没有任何控制权。我无法指定 overrideMimeType 或请求的 responseType。

我尝试对返回的数据进行 utf8 编码：

const utf8 = new TextEncoder();
const bytes  = utf8.encode(imageDataAsText);

//Convert to data url
const fr = new FileReader();
const blob = new Blob([bytes],{ type: attachment.Metadata.mediaType });
fr.onload = (e) => {
   setimageData(fr.result as string);
};
fr.readAsDataURL(blob);

通过字符代码转换也不起作用： https://stackoverflow.com/a/6226756/3244464

let bytesv2 = []; // char codes

for (var i = 0; i < imageDataAsstring.length; ++i) {
   var code = imageDataAsstring.charCodeAt(i);
   bytesv2 = bytesv2.concat([code & 0xff,code / 256 >>> 0]);
}

控制台输出显示的原始数据。我在这里使用的数据的实际默认编码是什么？

上下文：

* 有问题的数据是在 atlassian (jira/confuence) 生态系统内的 iframe 内接收的。它们不支持从父框架到 iframe 的管道二进制数据，由于授权流程需要存储在父页面上的 cookie，我也不能提出自己的请求。提到覆盖某些编码或在服务器端更改它的所有其他选项不适用于这种特定情况。

解决方法

当您使用 XMLHttpRequest 获取二进制数据时，不要将其作为字符串返回。使用 xhr.responseType = 'blob'（如果您打算读取/修改它，则使用 arrayBuffer）

var xhr = new XMLHttpRequest()
xhr.responseType = 'blob'
xhr.onload = () => {
  // Convert xhr blob to data url
  const fr = new FileReader()
  fr.onload = () => {
    setImageData(fr.result)
  }
  fr.readAsDataURL(xhr.response)
}

最好使用 fetch api 而不是旧的 XMLHttpRequest 来获取二进制文件它在网络工作者和服务器中更受欢迎。它也更简单，基于承诺

fetch(url)
  .then(res => res.blob())
  .then(blob => { ... })

为什么你需要它是一个 base64 网址？如果只是为了显示 <img> 的预览，那么它就是在浪费时间、CPU 和内存。最好这样做：

img.src = URL.createObjectURL(blob)