php画布怎么获取上传的图片,javascript – 使用AJAX将图像从画布上传到PHP服务器...

在我正在构建的软件中,我正在使用网络摄像头拍照并从那里将其上传到

PHP服务器以供以后使用.我已经使用表单成功地将图像从我的计算机上传到服务器,但由于我想要上传的图像已经预先确定,所以我一直在研究使用AJAX.我从网络摄像头拍摄快照的代码如下：

var video = document.getElementById('video');

// Get access to the camera!

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

// Not adding `{ audio: true }` since we only want video now

navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {

video.src = window.URL.createObjectURL(stream);

video.play();

});

}

// Elements for taking the snapshot

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var video = document.getElementById('video');

// Trigger photo take

document.getElementById("snap").addEventListener("click", function () {

var img = context.drawImage(video, 0, 0, 640, 480);

});

document.getElementById("capture").addEventListener("click", function () {

context.drawImage(video, 0, 0, 640, 480);

//var capture = canvas.toDataURL();

});

这是我保存此图像的PHP代码：

if (isset($_POST['upload'])) {

$image_name = $_FILES['image']['name'];

$image_name = $_FILES['image']['type'];

$image_name = $_FILES['image']['size'];

$image_tmp_name = $_FILES['image']['tmp_name'];

if ($image_name == '') {

echo "";

exit();

} else {

move_uploaded_file($image_tmp_name, "pictures/$image_name");

echo "Image uploaded succesfully.";

echo "";

}

}

?>

我确信这些代码都可以工作,因为我已经单独测试了它们.如前所述,我试图使用AJAX将它们绑定在一起.我找到的示例代码是：

function saveImage() {

var capture = canvas.toDataURL("image/png");

var xmlHttpReq = false;

if (window.XMLHttpRequest) {

ajax = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

ajax = new ActiveXObject("Microsoft.XMLHTTP");

}

ajax.open('POST', 'picture.php', false);

ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

ajax.onreadystatechange = function () {

console.log(ajax.responseText);

}

ajax.send("imgData=" + capture);

}

我在按钮内使用onClick =“saveImage()”来尝试调用函数将图像上传到服务器.当我按下按钮时,该文件似乎根本不访问服务器.我有什么东西在这里让它全部工作吗？