如何将位图返回到浏览器 WebApi答案

【问题标题】：How to return a bitmap to a browser WebApi如何将位图返回到浏览器 WebApi
【发布时间】：2013-01-23 15:28:37
【问题描述】：

我正在使用 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

             }
         });

【问题讨论】：

为什么是 AJAX？您不能简单地将'/api/drawings?id=' + this.id 指定为图像src 吗？
太完美了。我已将客户端更新为： document.body.querySelector("#elev").src = '/api/drawings?id=' + this.id;从服务器往返后，图像仅显示为损坏的图像图标，您知道损坏图像的默认值。我的 c# webapi 代码是否正确？
我认为你应该将内存流重置为开头，并指定Content.Headers.ContentLength。如果还是不行，直接在浏览器输入url，开启开发者工具查看网络流量。
我把它总结在一个答案中，以便您接受。
也处理位图！

标签： c# javascript image asp.net-web-api

【解决方案1】：

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

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

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

如果不行，直接在浏览器输入url，开启开发者工具查看网络流量。

【讨论】：

canvas.Save() 之后。它就像录音机：录音、倒带、回放。 ,
这是一个巨大的帮助。谢谢。