如何将位图返回给浏览器WebApi

Question

我正在使用JavaScript从客户端加载的文档向服务器“WebApi”发出请求。

当服务器接收到请求时，它会即时构建位图并将其作为.png格式返回给客户端。

当我在客户端读取响应时，从.ajax请求的数据部分仅返回一个空字符串。

如何使用WebApi读取来自服务器的图像，然后将客户端获取的新图像设置为图像的src属性？

--WebApi

public HttpResponseMessage Get(int id)
    {
        ElevationResponse elev = ElevationHelper.GetElevation(id);

        Bitmap canvas = ShopDrawing.Elevation.Elevation.GetShopDrawing(elev, true);

        var ms = new MemoryStream();
        canvas.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

        HttpResponseMessage r = Request.CreateResponse();
        r.Content = new StreamContent(ms);
        r.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/png");
        return r;
    }

--客户端

  $.ajax(
         {
             async: true,
             url: '/api/drawings?id=' + this.id,
             type: 'GET',
             contentType: "application/json",
             success: function (d, status) {
                 debugger

             }
         });

- Filling The Stack is What I DO

---

为什么要使用AJAX呢？你不能简单地将'/api/drawings?id=' + this.id指定为图像的src吗？ - Yogu

太好了。我已经更新了我的客户端代码：document.body.querySelector("#elev").src = '/api/drawings?id=' + this.id; 但是，在从服务器返回后，图像只显示为一个损坏的图像图标，你知道默认的损坏图像。我的C# WebAPI代码是否正确？ - Filling The Stack is What I DO

我认为你应该将内存流重置到开头，并指定Content.Headers.ContentLength。如果这不起作用，请直接在浏览器中输入URL并启用开发人员工具以查看网络流量。 - Yogu

我已经总结在一个答案中，这样你就可以接受它了。 - Yogu

也要释放位图！ - Dzejms

Answer 1

只需将'/api/drawings?id=' + this.id指定为图像src属性。

在服务器端，您应该在canvas.Save()之后重置内存流，以便从头开始发送。此外，指定http Content-Length标头，以便浏览器在下载时知道总大小：

ms.Position = 0;
r.Content.Headers.ContentLength = ms.Length;

如果这不起作用，直接在浏览器中输入URL，并启用开发者工具查看网络流量。

- Yogu

---

在 canvas.Save() 之后。就像卡带录音机一样：录音、倒带、回放。 - Yogu

这真的帮了大忙。谢谢你。 - AtLeastTheresToast