刷新时图像不会停止闪烁

Question

我已经看过并尝试了许多解决这个问题的方法，但没有任何效果。我有一个网站上的图像，需要更新10-30倍每秒(实时视频馈送)，所以我有javascript请求图像每100毫秒。当图像保持不变时，没有闪烁。当图像改变时，我看到图像上闪烁2-3秒。

function initImg() {
var canvas = document.getElementById("diagimg");
var context = canvas.getContext("2d");
img = new Image();
img.onload = function() {
var scale = .73;
canvas.setAttribute("width", 640*scale);
canvas.setAttribute("height", 480*scale);
context.scale(scale, scale); //scale it to correct size
context.drawImage(this, 0, 0);
}
img.onerror = function() {
img.src="images/wait.jpeg"; //if error during loading, display this image
}
refreshImg();
}
function refreshImg() {
img.src = "images/IMAGE.png?time="+new Date().getTime();
window.setTimeout("refreshImg()", 100);
}
initImg();

Answer 1

我已经把你的代码变成一个例子来测试这种行为，但我没有看到任何闪烁。闪烁是否可能是由服务器端代码引起的?

let images = [
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Mercury_in_color_-_Prockter07-edit1.jpg/220px-Mercury_in_color_-_Prockter07-edit1.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/PIA23791-Venus-NewlyProcessedView-20200608.jpg/220px-PIA23791-Venus-NewlyProcessedView-20200608.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/220px-The_Earth_seen_from_Apollo_17.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/OSIRIS_Mars_true_color.jpg/220px-OSIRIS_Mars_true_color.jpg'
];
let i = 0;
function getImage() {
i++;
if (i >= images.length)
i = 0;
return images[i];
}
//--------------------------------------
function initImg() {
var canvas = document.getElementById("diagimg");
var context = canvas.getContext("2d");
img = new Image();
img.onload = function() {
var scale = .73;
canvas.setAttribute("width", 640 * scale);
canvas.setAttribute("height", 480 * scale);
context.scale(scale, scale); //scale it to correct size
context.drawImage(this, 0, 0);
}
refreshImg();
}
function refreshImg() {
img.src = getImage() + "?time=" + new Date().getTime();
window.setTimeout("refreshImg()", 500);
}
initImg();

<canvas id="diagimg" />

Answer 2

修复了这个问题-原来是我试图在读取图像的同时写入图像。

快速总结我的设置:网站和java程序之间的websocket连接，加载到网页上的图像不断被外部程序覆盖。

解决办法是让网站请求websocket服务器复制图像。服务器(java程序)复制图像，检查副本是否与原始图像相等，并向网站发送消息，表示该图像已准备好可以读取。设备ID也被附加到文件路径中，这样每个连接的设备(网站打开的每个实例)都有自己的图像，只有当它请求更新时才会更改(它一旦完成加载就会请求新图像)。

这意味着图像只在客户端请求时被覆盖，并且客户端只在java websocket表示完成复制时才读取它们。

我确信这是低效的，但它只需要在10hz刷新，整个过程在自己的线程上只需要大约10ms，所以并不重要。