Question

我在应用程序上每秒刷新来自网络摄像头的图像。我遇到的问题是，如果几秒钟内没有从相机中检索到图像（经常发生这种情况），我最终会出现图像损坏。我想拥有它，以便只在找到新图像时才刷新。

到目前为止我已经

了

var int_time = setInterval(function() {
   var myImageElement = document.getElementById('myImage');
   myImageElement.src = '<%= EVERCAM_API %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%=  current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new Date().getTime();
}, 1000);

如果没有检索到图像，是否可以停止刷新？

Answer 1

以下代码段将有所帮助。

<强>解决方案：

1）创建动态图像对象

2）绑定事件

3）将动态创建的图像对象的src设置为所需的新图像链接

4）加载动态图像成功，替换原始标签或将原始图像标签的src设置为最新图像链接

这样可以避免图像损坏的问题

<强>代码：

var int_time;
(function(){
    var el = document.getElementById('myImage');
    function loadImage () {
        var img = new Image()
          , src = '<%= EVERCAM_API %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%=  current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new Date().getTime();;
        img.onload = function() {
          if (!! el.parent)
            el.parent.replaceChild(img, el)
          else
            el.src = src;
        }
        img.src = src;
    }
    int_time = setInterval(loadImage, 1000);
}());

Answer 2

将其保存在变量中，然后检查变量的内容，但是如果无法获取图像，我无法告诉您api返回的内容。你需要自己解决这个问题我假设在这里是假的......

var int_time = setInterval(function() {
    var myImageElement = document.getElementById('myImage');
    var newImage = '<%= EVERCAM_API %>cameras/<%= @camera["id"] %>/snapshot.jpg?api_id=<%=  current_user.api_id %>&api_key=<%= current_user.api_key %>&rand=' + new Date().getTime();
    if(newImage != false) { //Here you have to build an expression if the image is valid
        myImageElement.src = newImage;
    }
}, 1000);

如果找到新图像，则刷新图像

2 个答案: