Irf*_*dal 3 javascript php html5
我正在尝试将照片上传到服务器表单img标签，但我做不到。请帮助。首先，我从网络摄像头拍摄照片，然后将其上传到网络服务器上。当我从网络摄像头捕捉照片时，它会通过javascript方法getelementbyId在屏幕上显示。现在，我想编码它将被上传到我的Web服务器。请先谢谢.....我的代码如下：
//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><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);