Question

以下代码段中的input元素在HTML页面中放置了一个浏览按钮。从Android设备访问该页面时，它会显示一个浏览按钮，该按钮会打开我的相机并选择捕获的图像。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<input type="file" accept="image/*" capture="camera" />
</body>
</html>

我的问题是，如何将所选图像传递给JavaScript函数以在其上运行任何逻辑？

Answer 1

您想在问题中添加更多信息，但是如果您使用了一些技巧来使input保留图像源uri，则可以通过以下方式获取值：

<input id="image-input" type="file" accept="image/*" capture="camera" />

// js:
const input = document.querySelector("#image-input")
input.addEventListener('change', _ => {
  // if you want to read the image content
  const reader = new window.FileReader()
  // input.files[0] is the first image, you may want to directly use it instead of read it
  reader.readAsDataURL(input.files[0])
  // reader.result is the image content in base64 format
  reader.addEventListener('load', _ => console.log(reader.result))

})

Answer 2

好的，让我们将jQuery从this answer转换为您首选的本机JavaScript。

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      // $('#blah').attr('src', e.target.result); becomes...
      document.getElementById("blah").setAttribute("src", e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

//$("#imgInp").change(function() {
  //readURL(this);
//}); becomes...
document.getElementById("imgInp").onchange = function() {
  readURL(this)
}

将捕获的图像传递给JavaScript函数

2 个答案: