Question

我正在尝试将照片上传到服务器表格img标签，但我无法做到。请帮助。首先我从网络摄像头拍照，然后我想在我的网络服务器上传。当我从网络摄像头拍摄照片时，它会通过javascript方法getelementbyId显示在屏幕上。现在我想编码将它上传到我的网络服务器。 Plz帮助提前谢谢..... 我的代码如下：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

<img>是html元素。您在data URI创建的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);。

Apple 0
orange 5:
text1 : random text 
text2 : random text 
text3 : random text 
text4 : random text 
orange 6:
text1 : random text 
text2 : random text 
text3 : random text 
text4 : random text 

Apple 1
orange 12:
text1 : random text 
text2 : random text 
text3 : random text 
text4 : random text 
orange 13:
text1 : random text 
text2 : random text 
text3 : random text 
text4 : random text

如何从img标签上传图片？

1 个答案: