将内存中的 umat 或图像发送到 web 客户端并以 html 显示答案

【问题标题】：Send umat or image in memory to web client and display in html将内存中的 umat 或图像发送到 web 客户端并以 html 显示
【发布时间】：2017-12-28 02:45:57
【问题描述】：

我有一个 aurelia 客户端，它通过我的 API 从我的 asp.net 服务器获取图像。图像存储为 png 文件，并在 api 调用完成时加载。

这工作正常，但图像来自通过 Emgu cv 获取图像的网络摄像头。

我的问题是是否可以直接提供当前的 Umat/Mat 图像并显示在网页上。

 HttpResponseMessage response = new HttpResponseMessage();
        try
        {

         Console.WriteLine("Get image 3");
        manager.sem.WaitOne();

        // Maybe firsto to Emgu cv Umat to .net Image (bitmap?)
        // Then image to byte.memory stream
        // Send

        Image<Bgr, Byte> myImage = new Image<Bgr, Byte>(ddEngine.ResultImage.Bitmap);

        response.Content =
            new StreamContent(new MemoryStream(opencvCam.ResultImage.Bytes));
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");


        manager.sem.Release();
    }
    catch
    {
        Console.WriteLine("ex");
    }

我的客户端代码如下所示：

  updateImageSrc() {
    let dt = new Date();
    let baseUrl = "http://localhost:8080/api/status/dummymethod3";
    this.imagePath = baseUrl + "?t=" + dt.getTime();
}

还有html

    <img id="img" src.bind="imagePath"/>

页面不显示任何图像。

【问题讨论】：

您是否确认您的服务器端代码有效？如果没有，首先在标记中硬编码 URL：localhost:8080/api/status/dummymethod3?t=random">
感谢您的评论，我会在几个小时内尝试此操作。我认为问题也确实出在服务器上。 umat/mat 到图像之间的转换和它的发送。问题是当前的解决方案是我将 umat 图像转换并存储为 png，然后再次将其读出。但我不想将其保存在磁盘上。在服务器上，我希望它保持在堆上。

标签： asp.net .net typescript aurelia emgucv

【解决方案1】：

我看到你已经在使用

result.Content = new ByteArrayContent(memoryStream.ToArray());

我不认为转换为数组是最有效的方法（您应该会看到较大的图像会出现一些性能下降）

我的建议是使用 StreamContent。您的代码需要稍作改动：

[System.Web.Http.HttpGet]
[System.Web.Http.Route("dummymethod3")]
public HttpResponseMessage Get2()
{
    HttpResponseMessage response = new HttpResponseMessage();
    try
    {
        Console.WriteLine("Get image 3");
        ddEngine.sem.WaitOne();

        var memoryStream = new MemoryStream();
        ResultImage.Bitmap.Save(memoryStream, ImageFormat.Png);
        memoryStream.Position = 0;

        var result = new HttpResponseMessage(HttpStatusCode.OK);
        result.Content = new StreamContent(memoryStream);
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");

        ddEngine.sem.Release();

        return result;
    }
    catch
    {
        Console.WriteLine("Ex");
    }

    return response;
}

【讨论】：

谢谢你的评论，我明天会检查这个！

【解决方案2】：

我找到了解决方案，首先从 Umat/mat 中获取位图。然后做一个内存流。以您想要的图像格式（在本例中为 png）将图像保存到创建的内存流中。接下来使用流创建一个字节数组，并将创建的字节数组放入 HTTPResponseMessage 的 content 属性中。还将内容类型设置为图像类型，在我的情况下为 png。

这种方式没有实际的图像写入磁盘，而是保存在服务器应用程序的堆上。

    [System.Web.Http.HttpGet]
    [System.Web.Http.Route("dummymethod3")]
    public HttpResponseMessage Get2()
    {
        HttpResponseMessage response = new HttpResponseMessage();
        try
        {
            Console.WriteLine("Get image 3");
            ddEngine.sem.WaitOne();
            var result = new HttpResponseMessage(HttpStatusCode.OK);

            image = ResultImage.Bitmap;
            var memoryStream = new MemoryStream();
            image.Save(memoryStream, ImageFormat.Png);
            result.Content = new ByteArrayContent(memoryStream.ToArray());
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");

            ddEngine.sem.Release();

            return result;
        }
        catch
        {
            Console.WriteLine("Ex");
        }

        return response;
    }

【讨论】：