Wie lade ich ein Bild vom img-Tag hoch?

-1

Ich versuche, Foto auf Server-Formular img-Tag hochladen, aber ich kann es nicht tun. PLZ Hilfe. Zuerst nehme ich ein Foto von der Webcam, dann möchte ich auf meinen Webserver hochladen. Wenn ich ein Foto von der Webcam schnappt, wird es auf dem Bildschirm von JavaScript-Methode geelementbyId angezeigt. Jetzt möchte ich kodieren, dass es auf meinen Webserver hochgeladen wird. Plz Hilfe Vielen Dank im Voraus ..... Mein Code ist unten:Wie lade ich ein Bild vom img-Tag hoch?

//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>

Quelle

2016-10-16 Irfan Gondal

<img> ist ein html Element. Die data URI, die Sie erstellt bei var dataURL = picture.toDataURL(); erstellt haben, ist eine Bilddatei.

können Sie POST die data URI, die Sie auf dem Server erstellt XMLHttpRequest() verwenden, FormData().

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

Quelle

2016-10-16 06:36:52 guest271314

@IrfanGondal siehe [Verwenden von Dateien von Web-Anwendungen] (https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications) – guest271314

Wie lade ich ein Bild vom img-Tag hoch?

Antwort

Verwandte Themen