Question

我正在尝试在网页上获取图像（来自ipcam）并自动刷新它。我做了一个后端，它有一个读取图像并返回它的函数。这有效，看起来像这样：

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

    HttpResponseMessage response = new HttpResponseMessage();

    String filePath = "C:\\Users\\user1\\TestProject\\\\bin\\Debug\\testimage.png";
    response.Content = new StreamContent(new FileStream(filePath, FileMode.Open)); // this file stream will be closed by lower layers of web api for you once the response is completed.
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");     


    ddEngine.sem.Release();

    return response;

}

此功能有效并返回图像。在客户端，我有控制器调用获取图像的更新方法。

  activate(){
      setInterval(this.updateStatus.bind(this), 1000);
  }

   updateStatus = function () {
      this.statusService.getImage()
        .then(data => this.message = data);
  }

getImage方法如下所示：

getImage() {
     return this.client.get(baseUrl)
        .then(response => {
           return response.content;
    });
}

html看起来像这样并且显示第一个图像。

    <template>
    </script>
   <img id="img" src= "http://localhost:8080/api/status/dummymethod3" />
</template>

在我的自定义OWIN中间件中，我添加了无缓存值。

    public async override Task Invoke(IOwinContext context)
{
    context.Response.Headers["MachineName"] = Environment.MachineName;
    context.Response.Headers.Add("CACHE-CONTROL", new[] {"NO-CACHE"});

    await Next.Invoke(context);
}

按F5键时，重新加载整个页面并获取新图像。我看到调用了ineval方法并调用了后端调用。但图像没有刷新。

有没有人知道如何刷新图像？任何想法都是受欢迎的！

Answer 1

我认为您对如何解决问题感到有点混淆。

您正在使用getImage()方法，但之后却没有对结果做任何事情。因此，即使每秒都触发它 - 它实际上也无法做任何事情。

您可以使用src.bind然后使用函数刷新URL以重新加载图像，而无需通过API调用图像。

您的HTML;

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

你的Javascript;

imagePath = '';

activate(){
    setInterval(this.updateImageSrc.bind(this), 1000);
}

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

这将通过更新虚拟查询参数每秒为您的图像创建一个新URL。使用src.bind可确保此网址不断更新。

如何在网页上自动刷新图片

1 个答案: