如何从img标签上传图片？ [英] How to upload image from img tag?
问题描述
我正在尝试将照片上传到服务器表格img标签，但我不能这样做。请帮助。
首先我从网络摄像头拍照，然后我想在我的网络服务器上传。当我从网络摄像头拍摄照片时，它会通过javascript方法getelementbyId显示在屏幕上。现在我想编码将它上传到我的网络服务器。
Plz帮助提前致谢.....
我的代码如下：
I am trying to upload photo to server form img tag, but i can't do it. plz help. First I take photo from webcam, then i want to upload on my web server. When I Snap photo from webcam, it show on the screen by javascript method getelementbyId. Now I want to code that it will be uploaded to my web server. Plz Help Thanks in advance..... My Code is below:
//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 元素。您在 var dataURL = picture.toDataURL（）; 创建时创建的数据URI 是一个图像文件。
<img> is an html element. The data URI that you created at created at var dataURL = picture.toDataURL(); is an image file.
您可以 POST 您创建的数据URI 服务器使用 XMLHttpRequest（）， FormData（）。
You can POST the data URI that you created to server using 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);
这篇关于如何从img标签上传图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
