Question

我从服务器接收到JSON响应，但是使用data URI存在一些常见问题，例如长度限制，更不用说安全性问题了。

通过搜索，我发现了一些useful examples，例如createObjectURL和FileReader。但是，这些图像没有显示。

因此，blob是base64编码的，并以JSON格式发送。 $json_array[]= base64_encode($flal_file);

在JavaScript中，我会执行以下操作：

尝试1（URL显示在源代码中，但图像不显示）：

$(data).each(function(index,data){ 
var typedArray = data;
var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); 

var url = URL.createObjectURL(blob);
res = '<img  src="'+url+'"/>';

});

尝试2（获得不确定的结果）：

const blb    = new Blob(data, {type: "text/plain"});
const reader = new FileReader();

// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e) => {
  const text = e.srcElement.result;
  console.log(text);
});


// Start reading the blob as text.
reader.readAsText(blb);

由于长度限制，浏览器无法读取整个Blob。也许我需要缩短服务器的响应。

Answer 1

尝试如下加载图像字节数组：

<img  src="data:image/jpg;base64, imageBytes"/>

正确显示浏览器中的斑点

1 个答案: