javascript - 在 getImageData 之后 innerHTML 不起作用

Question

我使用代码在视频标签中显示网络摄像头显示的内容。

如果支持网络摄像头访问，我每秒调用一次此函数：

function refresh() {
  var h = video.height;
  var w = video.width;
  var img = video.getImageData(0, 0, w, h);
  document.getElementById('text_01').innerHTML = "!";
}

使用 var video

var video = document.querySelector('video');

问题是当我像这样放置这些行时，“text_01”的文本会成功更改：

document.getElementById('text_01').innerHTML = "!";
img = video.getImageData(0, 0, w, h);

但不是这样：

img = video.getImageData(0, 0, w, h);
document.getElementById('text_01').innerHTML = "!";

在某些功能之后使用 innerHTML 是否有某种限制？

Answer 1

.getImageData是<canvas>元素的函数，而不是<video>元素。如果您检查浏览器控制台，您会看到类似getImageData is not a function.

这就是innerHTML未设置的原因 - 由于错误，代码停止。