如何从img标签上传图片？
[英]How to upload image from img tag?
问题描述
I am trying to upload photo to server form img tag, but i can't do it. 
我正在尝试将照片上传到服务器表单img标签，但我不能这样做。 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. 当我从网络摄像头拍摄照片时，它会通过javascript方法getelementbyId显示在屏幕上。 Now I want to code that it will be uploaded to my web server. 现在我想编码将它上传到我的网络服务器。 Plz Help Thanks in advance..... My Code is below: Plz帮助提前致谢.....我的代码如下：
//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>
1 个解决方案
解决方案1
4 2016-10-16 06:36:52
<img> is an html element. <img>是一个html元素。 The data URI that you created at created at var dataURL = picture.toDataURL(); 您在var dataURL = picture.toDataURL();创建时创建的data URI var dataURL = picture.toDataURL(); is an image file. 是一个图像文件。
You can POST the data URI that you created to server using XMLHttpRequest() , FormData() . 您可以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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.