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

Fil*_* DO 4 javascript c# image asp.net-web-api

我正在使用客户端已经加载的文档中的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;
    }
Run Code Online (Sandbox Code Playgroud)

- 客户

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

             }
         });
Run Code Online (Sandbox Code Playgroud)

Yog*_*ogu 8

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

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

ms.Position = 0;
r.Content.Headers.ContentLength = ms.Length;
Run Code Online (Sandbox Code Playgroud)

如果这不起作用,请直接在浏览器中输入URL并启用开发人员工具以查看网络流量.