Блог

Главная - Вопросы по программированию - Как загрузить изображение из тега img?

Как загрузить изображение из тега img?

#javascript #php #html

#javascript #php #HTML

Вопрос:

Я пытаюсь загрузить фотографию на сервер в виде тега img, но не могу этого сделать. пожалуйста, помогите. Сначала я беру фотографию с веб-камеры, затем я хочу загрузить на свой веб-сервер. Когда я делаю снимок с веб-камеры, он отображается на экране методом javascript getElementById. Теперь я хочу написать код, который будет загружен на мой веб-сервер. Пожалуйста, помогите, заранее спасибо ….. Мой код ниже:

 //script_photo.js

var photoButton = document.getElementById('snapPicture');
photoButton.addEventListener('click', picCapture, false);

navigator.getUserMedia ||
     (navigator.getUserMedia = navigator.mozGetUserMedia ||
     navigator.webkitGetUserMedia || navigator.msGetUserMedia);

if (navigator.getUserMedia) {
          navigator.getUserMedia({video:true,audio:false}, onSuccess, onError);
     } else{
          alert('Your browser isnt supported');
}

function onSuccess(stream) {
     vidContainer = document.getElementById('webcam');
     var vidStream;
     if (window.webkitURL){
          vidStream = window.webkitURL.createObjectURL(stream);
          }else{
               vidStream = stream;
     }
     vidContainer.autoplay = true;
     vidContainer.src = vidStream;

}

function onError(){
     alert('Houston, we have a problem');
}

function picCapture(){
     var picture = document.getElementById('capture'),
          context = picture.getContext('2d');

     picture.width = "600";
     picture.height = "400";
     context.drawImage(vidContainer, 0, 0, picture.width, picture.height);

     var dataURL = picture.toDataURL();
     document.getElementById('canvasImg').src = dataURL;
} 
 <!DOCTYPE>
<html>
     <head>
          <title>My Photo Booth</title>
     <head>
     <body>
          <center>
          <video id="webcam" width="200" height="200"></video>
          <br>
          <input type="button" id="snapPicture" value="Snap A Picture!" />
          <p> 
          <canvas id="capture" style="display:none;"></canvas>
          <img id="canvasImg" alt="right click to save">
          <script src = "script_photo.js"></script>
          </center>          
     </body>
</html>

Ответ №1:

<img> является html элементом. То data URI , что вы создали в created at var dataURL = picture.toDataURL(); , является файлом изображения.

Вы можете POST data URI создать то, что вы создали, на сервере, используя XMLHttpRequest() , FormData() .

 var request = new XMLHttpRequest();
request.open("POST", "/path/to/server", true);
var data = new FormData();
data.append("image", dataURL, "imagename");
request.send(data);

Комментарии:

1. @IrfanGondal Смотрите раздел Использование файлов из веб-приложений

Метки: