Передать захваченное изображение в функцию JavaScript - PullRequest
Новая
       1

Передать захваченное изображение в функцию JavaScript

0 голосов
/ 15 апреля 2019

Элемент ввода в следующем фрагменте помещает кнопку просмотра на 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 для запуска какой-либо логики на нем?

Ответы [ 2 ]

1 голос
/ 15 апреля 2019

Вы хотели бы добавить больше информации к вашему вопросу, но если вы использовали некоторые методы, чтобы 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))

})
0 голосов
/ 15 апреля 2019

Хорошо, давайте переведем jQuery из этого ответа в ваш предпочитаемый нативный 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)
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...