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和实际绘制到画布的图像之间存在重要的延迟。 以下是发生的问题：

用户1使用平板电脑，按下按钮，将其照片“快照”并发送到服务器。服务器接收空白，透明的图像。（这与html5 canvas toDataURL returns blank image不同 - 发送到服务器的数据对于第一张图片而言要少得多，因为它是空白的）
几分钟后，用户2使用平板电脑并按下按钮，并将照片“快照”。服务器接收用户1的照片。
稍后，用户3执行相同的操作，服务器会获取用户2的照片。

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

我试过了：

将snap()中的超时更改为各种值。我尝试的最高值是2000，但同样的问题也发生了。（如果有人建议更高的数字，我很乐意尝试它们，但我不想更高，因为如果我走得太高，用户3有可能在我甚至处理用户2之前拍照照片，这意味着我可能完全失去它！）
在页面首次加载时绘制画布，但是没有修复它 - 当用户1被拍照时，服务器接收到加载页面时拍摄的任何照片，而不是用户1的照片。
在调用getElementById之前，使用toDataURL再次“获取”canvas元素。

还有一些说明：

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

因为页面是单页面应用程序而不需要滚动或缩放，所以可能的解决方法是将视频和画布移动到页面折叠下方，然后禁用使用javascript滚动（即每当用户滚动时滚动到顶部）

但如果可能的话，我宁愿选择合适的方法而不是解决方法！

Answer 1

我没有一个非常好的解决方案，但我建议不要通过设置隐形来处理隐形画布。

而不是

 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")?

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

EDIT2：考虑到这一点，Canvas还有另外两个选项可以将照片放到你希望看到的照片中。那两个是：

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

-OR -

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

Answer 2

某些版本的Android存在问题toDataUrl();也许这是解决方案？

http://code.google.com/p/todataurl-png-js/wiki/FirstSteps

脚本：http://todataurl-png-js.googlecode.com/svn/trunk/todataurl.js

将其粘贴到head：

中

<script src="todataurl.js"></script>

上下文drawImage / canvas toDataURL在opera mobile上显着滞后

2 个答案: