1

我有一些在Android平板电脑上运行的 Javascript，运行Opera Mobile 12。平板电脑固定在办公室的墙上，因此在办公室工作的每个人都将其用作计时系统（即，他们用它来打卡/下班）。此 javascript 在引发特定事件时拍摄用户照片，然后将此照片转换为数据 URL，以便将其发送到服务器。不过，videocanvasdisplay: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 返回空白图像不同- 第一张图像发送到服务器的数据要少得多，因为它是空白的）
  • 几分钟后，用户 2 使用平板电脑并按下按钮，并“拍摄”了他们的照片。服务器接收到用户 1 的照片。
  • 之后，用户 3 做同样的事情，服务器获取用户 2 的照片。

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

我试过了：

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

还有一些注意事项：

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

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

但如果可能的话，我宁愿一个适当的修复而不是解决方法！

4

2 回答 2

4

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

代替

 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

于 2013-02-23T10:45:19.647 回答
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>
于 2013-05-09T15:08:52.997 回答