imgタグから画像をアップロードするには？

-1

写真をサーバーフォームのimgタグにアップロードしようとしていますが、できません。 PLZヘルプ。最初にウェブカメラから写真を撮ってから、自分のウェブサーバーにアップロードしたいと思います。ウェブカメラから写真をスナップすると、javascriptのメソッドgetelementbyIdによって画面に表示されます。今私はそれが私のWebサーバーにアップロードされることをコードしたいと思います。事前に Plzをヘルプおかげで..... マイコードは以下の通りです：imgタグから画像をアップロードするには？

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

出典

2016-10-16 Irfan Gondal

<img>はhtml要素です。 var dataURL = picture.toDataURL();に作成したdata URIはイメージファイルです。

XMLHttpRequest(),FormData()を使用してサーバーに作成したdata URIPOSTを送信できます。

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

出典

2016-10-16 06:36:52 guest271314

@IrfanGondal [Webアプリケーションからのファイルの使用]（https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications）を参照してください。 – guest271314

imgタグから画像をアップロードするには？

答えて

関連する問題