将 XMLHTTPResponseText 解码为 dataUrl，无需在服务器端进行基本编码 [英] Decode XMLHTTPResponseText into dataUrl without base encoding on server side

问题描述

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

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

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

const utf8 = new TextEncoder();const 字节 = utf8.encode(imageDataAsText);//转换为数据urlconst fr = new FileReader();const blob = new Blob([bytes], { type: attachment.metadata.mediaType });fr.onload = (e) =>{setImageData(fr.result as string);};fr.readAsDataURL(blob);

通过字符代码转换也不起作用:

上下文:

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

解决方案

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

var xhr = new XMLHttpRequest()xhr.responseType = 'blob'xhr.onload = () =>{//将 xhr blob 转换为数据 urlconst fr = 新的 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)

How can the plain text response of an XMLHTTPRequest be converted to a dataUrl on client side?

Image data is being send from the server to an Iframe and the only option to retrieve the data is the default encoded data from a GET request.* I do not have any control over the server. I can not specify overrideMimeType nor the responseType of the request.

I tried to utf8 encode the returned data:

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);

Converting via the char code didn't work either: 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]);
}

Raw data as it is displayed by console out. What is the actual default encoding of the data I am working with here?

Context:

* The data in question is recieved inside an iframe inside the atlassian (jira/confuence) ecosystem. They do not support piping binary data from the parent frame to the iframe, nor can I make my own request due to the authorization flow which requires cookies stored on the parent page. All other options mention to override some encoding, or changing it on the server side do not apply in this specific case.

解决方案

When you are using XMLHttpRequest to get binary data then don't return it as a string. Use xhr.responseType = 'blob' (or arrayBuffer if you intend to read/modify it)

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)
}

Better yet use the fetch api instead of the old XMLHttpRequest to get the binary It's more popular among web workers and servers. It's also simpler and based on promises

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

And why do you need it to be a base64 url? if it's just to show a preview of an <img> then it's a waste of time, cpu and memory. It would be better just to do:

img.src = URL.createObjectURL(blob)

这篇关于将 XMLHTTPResponseText 解码为 dataUrl，无需在服务器端进行基本编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！