将八位字节流转换为图像

Question

我需要使用 $http.get 获取文件。数据以应用程序/八位字节流的形式返回但我知道这个文件是一个图像。

如何将此文件显示为图像？

我试过了

var nuroImage = new Image();
nuroImage.onload = function {
  scope.imageSrc = this.src;
}
$http(req).then(
  funciton(response) {
    nuroImage.src = "data:application/octet-stream," + response.data
  }

我得到 200ok，但图像没有显示

是否可以将八位字节流转换为 jpeg/png？

Answer 1

您可以使用 fetch（） 请求图像作为Blob，URL.createObjectURL（） 从响应创建 blob URL

(async () => {
  const res = await fetch('https://httpbin.org/image/png')
  const blob = await res.blob()
  const img = new Image()
  img.src = URL.createObjectURL(blob)
  // newer promise based version of img.onload
  await img.decode()
  
  document.body.append(img)
  // Don't forget to revoke the blob url when 
  // you no longer need it (to release memory)
  URL.revokeObjectURL(img.src)
})()

Answer 2

我想你应该是这样的：

• 使用 atob 对生成的运行长度压缩图像文件进行编码
• 并使用<img src="data:image/png;base64,....">将其包含在 html5 文件中

如果您的文件不是 PNG，请添加相应的 MIME 类型。

示例：

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/
f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67
QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g7
7ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"/>

• https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/atob
• http://www.html5rocks.com/en/tutorials/canvas/integrating/

Answer 3

如果这里有人使用 axios 并在图像/八位字节流或 base64 中转换应用程序/八位字节流二进制文件时遇到问题，那么请不要使用 Axios 代替您可以使用 fetch API（现代浏览器获取 API 数据），它将解决这个问题。

fetch('https://picsum.photos/536/354', {
    method: 'GET',
})
.then((data) => {
    // IMP to convert your json or other response to blob ( for this you have to check your api response is file / binary 
    return data.blob()
})
.then((data) => {
    var reader = new FileReader();
    reader.onload = function() {                         
        var b64 = reader.result
        console.log("This is base64", b64)
    }
    reader.readAsDataURL(data)
})
.catch((error) => {
    error.text().then( errorMessage => {
        console.log(errorMessage)
    })
})