将响应转换为新图像答案

【问题标题】：Convert response to new Image将响应转换为新图像
【发布时间】：2017-09-14 05:43:28
【问题描述】：

有没有办法将 HTTP Get 响应转换为 Image() 对象？

目前我使用：

backImage = new Image()
backImage.src = "http://www.example.com/someimage.jpg";

我想使用我的 web api（服务于 HttpResponseMessage）：

public HttpResponseMessage GetImage(Guid id)
        {
           // my logic and image extraction
           var file = new FileInfo("path-to-my-image");
           var fileStream = file.OpenRead();
           var response = new HttpResponseMessage { Content = new StreamContent(fileStream) };
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpg");
                response.Content.Headers.ContentLength = file.Length;
                return response;
            }

我目前通过它调用

this.http.get("http://www.example.com/api/GetImage/"+id);

当我在 Postman 中测试它时，我会返回响应并渲染图像。

我正在尝试找出是否可以转换该响应并将其存储在 Image() 对象中。

【问题讨论】：

你在GetImage API 返回什么？
包含图片的HttpResponseMessage
您的方法是否读取.jpg 文件并将流作为响应发送给客户端？
是的，只是更新了显示响应的问题
我猜你不需要http.get。只需直接将 URL 设置为 img.src 就像 img.src = "http://www.example.com/api/GetImage/my-id.jpg" 一样，因为您正在设置所有必需的标头值，告诉客户端传入的响应是 jpg 类型的文件

标签： javascript angular

【解决方案1】：

您可以返回图片的 base64 值：

var returnString = "data:image/jpg;base64,"+Convert.ToBase64String(bytearray);

客户端示例：

this.http
 .get("http://www.example.com/api/GetImage/"+id)
 .then(x=>{
    backImage = new Image()
    backImage.src = x;
   //render
});

控制器示例：

public object GetImage(Guid id)
{
  string base64String;

  Byte[] bytes = File.ReadAllBytes("path to filename"+id);
  base64String = Convert.ToBase64String(bytes);

  return "data:image/jpg;base64," + base64String;
}

【讨论】：

我已经扩展了您的答案，以帮助其他人了解完整情况（控制器 + 客户端）

【解决方案2】：

这是一个使用setgetgo API 的示例，它根据 ID 返回图像

var img = new Image();
var generateImageId = () => Math.ceil(Math.random() * 100000);
img.src = "http://setgetgo.com/randomimage/get.php?key=" + generateImageId();
document.body.appendChild(img)

工作提琴手link

要将图像保存到磁盘，请查看此SO answer

【讨论】：