有没有一种特殊的方法可以将手机摄像头中的图像加载到 Android Firefox 的 img 中答案

【问题标题】：Is there a special way to load an image from a phone's camera into img for Android Firefox有没有一种特殊的方法可以将手机摄像头中的图像加载到 Android Firefox 的 img 中
【发布时间】：2021-03-16 00:05:12
【问题描述】：

我正在尝试将手机相机中的图像加载到图像标签中。除了 Android 上的 Firefox 之外，它在任何地方都很好用。 Firefox 版本是 83.1.0 下面是产生问题的简单 JavaScript 和 HTML。我要做的就是使用相机拍照并将其加载到img标签中进行显示。在 Chrome 甚至三星笨拙的互联网浏览器中运行良好。只是不在 Firefox 中。图像不显示。我做错了什么？

window.onload = function() {
let imgInput = document.querySelector('#imageInput');
   
   imgInput.addEventListener('change',function(event) {
      var files = this.files;
      var fr = new FileReader();
   
      fr.onload = function () {
         document.getElementById('image').src = fr.result;
      }

      fr.readAsDataURL(files[0]);
   });
};

...

<input id="imageInput" type="file" accept="image/*" capture="camera">
<img id="image" style="height: 300px; width: auto;"/>

【问题讨论】：

标签： image file firefox input upload

【解决方案1】：

您好，欢迎来到 SO :) 我对您的代码有点困惑，因为您提到“从相机加载图像”，但您也在加载文件。

更新答案：使用 WebRTC

正如@evilpie 提到的，ImageCapture 目前在 Firefox 中不受支持。不过，MDN 还有一篇关于using WebRTC to take still pictures 的好文章。

这是文章中描述的takepicture 函数。它使用video element 接收WebRTC 流，然后在Canvas 中呈现该元素的内容。然后将内容转换为数据 URL 以在另一个组件中显示。

  function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);
    
      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    } else {
      clearphoto();
    }
  }

旧答案（不起作用：Firefox 不支持ImageCapture）

MDN 网站上有一个 nice example 专门用于从相机加载图像。该示例适用于所有浏览器（演示是available here）：

var takePhotoButton = document.querySelector('button#takePhoto');
var canvas = document.querySelector('canvas');

takePhotoButton.onclick = takePhoto;

function takePhoto() {
  imageCapture.takePhoto().then(function(blob) {
    console.log('Took photo:', blob);
    img.classList.remove('hidden');
    img.src = URL.createObjectURL(blob);
  }).catch(function(error) {
    console.log('takePhoto() error: ', error);
  });
}

演示的完整JS代码是available on GitHub。

【讨论】：

ImageCapture 在 Firefox 中不受支持：bugzilla.mozilla.org/show_bug.cgi?id=88817
对不起。我的意思是bugzilla.mozilla.org/show_bug.cgi?id=888177

【解决方案2】：

我认为可能存在两个潜在问题：

您的 Firefox for Android 版本已过时。有一个问题报告显示通过<input type="file"> 捕获的图像可能在旧版本中被破坏：https://github.com/mozilla-mobile/fenix/issues/8711
使用 data: URL 代替 blob: URL。 Firefox for Android 似乎对数据有一个相当低的限制：URL 长度。高分辨率图像可能太大。 URL.createObjectURL 改为创建 Blob URL。

我在 Firefox for Android Nightly 上成功测试了以下实现：

<input type=file accept="image/*" id="imageInput">
<img id="image">
<script>
var imgInput = document.querySelector("#imageInput");
imgInput.addEventListener('change',function(event) {
  var file = event.target.files[0];
  var url = URL.createObjectURL(file);
  document.getElementById('image').src = url;
});
</script>

【讨论】：