将八位字节流转换为图像

Question

我需要使用$ 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？

Answer 1

您可以使用XMLHttpRequest()请求形象Blob,URL.createObjectURL()打造从响应一个blob网址

var nuroImage = new Image;
var request = new XMLHttpRequest();
request.responseType = "blob";
request.onload = function() {
  nuroImage.src = URL.createObjectURL(this.response)
}
request.open("GET", "/path/to/image/file");
request.send();

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/