将八位字节流转换为图像

Posted 2023-03-14

【中文标题】将八位字节流转换为图像

【英文标题】：Convert octet-stream to image

【发布时间】：2016-09-27 09:44:53

【问题描述】：

我需要使用 $http.get 获取文件。 数据作为 application/octet-stream 返回 但我知道这个文件是一个图像。

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

我试过了

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？

【问题讨论】：

如果响应已经是data URI，请尝试在第二个示例中删除"data:application/octet-stream,"。能否在 Question 中包含返回字符串的前 15 到 20 个字符？

【参考方案1】：

如果有人在这里使用 axios 并在 image/octet-stream 或 base64 中转换应用程序/octet-stream 二进制文件时遇到问题，那么请不要使用 axios，而是可以使用 fetch api of(modern browser to fetch api data ) 它会解决这个问题。

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

【讨论】：

不要使用 FileReader 将 blob 读取为 base64 - 请改用 URL.createObjectURL(blob)

@Endless - 谢谢

【参考方案2】：

您可以使用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)
)()

【参考方案3】：

我猜你应该是这样的：

使用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/