javascript - context drawImage/canvas toDataURL 在 Opera Mobile 上明显滞后

Question

我有一些在 Android 平板电脑上运行的 Javascript，运行 Opera Mobile 12。平板电脑贴在办公室的墙上，因此在办公室工作的每个人都将其用作计时系统(即，他们用它来上类/下类打卡)。当某个事件发生时，此 javascript 会拍摄用户的照片，然后将此照片转换为数据 URL，以便将其发送到服务器。不过，这一切都在后台运行 - video 和 canvas 元素都设置为 display:none; .

这是处理网络摄像头交互的代码:

var Webcam = function() {
  var video = document.getElementById('video');
  var stream_webcam = function(stream) {
    video.addEventListener('loadedmetadata', function(){
      video.play();
    }, false);
    video.src = window.URL.createObjectURL(stream);
  }

  // start recording
  if (navigator.getUserMedia)
    navigator.getUserMedia({video: true}, stream_webcam);
  else
    _error("No navigator.getUserMedia support detected!");

  var w = {};

  w.snap = function(callback) {
    var canvas = document.getElementById('canvas');
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    // delay is incurred in writing to canvas on opera mobile
    setTimeout(function() {
      callback(canvas.toDataURL());
    }, 1);
  };

  return w;
}

w.snap(callback) 在用户按下某个按钮时被调用。问题是在调用 drawImage 和实际绘制到 Canvas 上的图像之间存在显着延迟。 这是出现的问题:

• 用户 1 使用平板电脑，按下按钮，将他们的照片“拍下”并发送到服务器。服务器收到一个空白、透明的图像。 (这与 html5 canvas toDataURL returns blank image 不同 - 第一张图像发送到服务器的数据要少得多，因为它是空白的)
• 几分钟后，用户 2 使用平板电脑并按下按钮，“拍下”了他们的照片。服务器收到用户1的照片。
• 稍后，用户 3 做了同样的事情，服务器得到了用户 2 的照片。

所以我猜测对 toDataURL() 的调用正在返回旧数据，因为 drawImage() 没有。 (我在某处读到它是异步的，但我无法确认也找不到任何方法来将事件附加到它完成绘制的时间。)

我试过:

• 将 snap() 中的超时更改为各种值。我试过的最高是2000，但出现了同样的问题。 (如果有人建议更高的数字，我很乐意尝试，但我不想更高，因为如果我太高，用户 3 有可能在我处理用户 2 之前拍摄他们的照片照片，这意味着我可能会完全丢失它!)
• 让 Canvas 在页面首次加载时绘制一些东西，但这并没有解决问题 - 当用户 1 被拍照时，服务器收到的是页面加载时拍摄的任何照片，而不是用户 1 的照片。<
• 在调用 toDataURL 之前，使用 getElementById 再次“获取” Canvas 元素。

一些注意事项:

• 这在我的电脑 (macbook air) 的 Chrome 和 Opera 中运行良好。
• 我无法使用调试器可靠地复制它(使用 Opera Dragonfly 链接到平板电脑)。
• AFAIK Opera Mobile 是唯一支持 getUserMedia 并因此可以拍照的 Android 浏览器。
• 如果我从 video 和 canvas 中删除 display:none;，它将正常工作(在平板电脑上)。 仅当视频和 Canvas 设置了 display:none; 时才会出现此问题。

因为该页面是一个不需要滚动或缩放的单页应用程序，一个可能的解决方法是将视频和 Canvas 移动到页面折叠下方，然后使用 javascript 禁用滚动(即，每当用户滚动时滚动到顶部) .

但如果可能的话，我宁愿进行适当的修复而不是解决方法!

Answer 1

我没有很好的解决方案，但我建议不要通过将 dom 设置为不可见来处理不可见的 Canvas 。

代替

 var canvas = document.getElementById('canvas');

尝试

var canvas = document.createElement('canvas');
 canvas.width = video.width;
 canvas.height = video.height;
 canvas.getContext('2d').drawImage(video, 0, 0)

这样它就与 DOM 分开了。

还有为什么不用

canvas.toDataURL("image/jpg")?

编辑:此外，如果您正在设计它，您是否尝试过其他浏览器？是什么限制您使用 Opera 而不是其他可用的浏览器或使用 phonegap？

EDIT2:考虑一下，Canvas 还有两个其他选项可以让您将想要一分为二的照片放到合适的位置。这两个是:

var imgData = canvas.getContext('2d').getImageData(0,0,canvas.width,canvas.height);

-或-

canvas.getContext('2d').putImageData(imgData,0,0);

这两个忽略了您对上下文所做的任何缩放，但我发现它们更直接而且通常更快。它们是 toDataURL 和 drawImage 的可靠替代品，但是您放入和从中获取的图像数据被编码为以下形式的数组:

[r1, b1, g1, a1, r2, b2, g2, a2....]

您可以在这里找到它们的文档:

http://www.w3schools.com/tags/canvas_putimagedata.asp http://www.w3schools.com/tags/canvas_getimagedata.asp