将内存中的umat或image发送到web客户端并显示在html

Question

我有一个 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"/>

该页面没有显示任何图像。

Answer 1

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

Answer 2

我看到您已经使用

解决了这个问题

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;
}

将内存中的umat或image发送到web客户端并显示在html

Send umat or image in memory to web client and display in html

.net

asp.net

emgucv

typescript

aurelia