delete src
This commit is contained in:
@@ -1,138 +0,0 @@
|
||||
(function() {
|
||||
// The width and height of the captured photo. We will set the
|
||||
// width to the value defined here, but the height will be
|
||||
// calculated based on the aspect ratio of the input stream.
|
||||
|
||||
var width = 320; // We will scale the photo width to this
|
||||
var height = 0; // This will be computed based on the input stream
|
||||
|
||||
// |streaming| indicates whether or not we're currently streaming
|
||||
// video from the camera. Obviously, we start at false.
|
||||
|
||||
var streaming = false;
|
||||
|
||||
// The various HTML elements we need to configure or control. These
|
||||
// will be set by the startup() function.
|
||||
|
||||
var video = null;
|
||||
var canvas = null;
|
||||
var photo = null;
|
||||
var startbutton = null;
|
||||
|
||||
function startup() {
|
||||
video = document.getElementById('video');
|
||||
canvas = document.getElementById('canvas');
|
||||
photo = document.getElementById('photo');
|
||||
startbutton = document.getElementById('startbutton');
|
||||
sendbutton = document.getElementById('sendbutton');
|
||||
navigator.getMedia = ( navigator.getUserMedia ||
|
||||
navigator.webkitGetUserMedia ||
|
||||
navigator.mozGetUserMedia ||
|
||||
navigator.msGetUserMedia);
|
||||
|
||||
navigator.getMedia(
|
||||
{
|
||||
video: true,
|
||||
audio: false
|
||||
},
|
||||
function(stream) {
|
||||
video.srcObject = stream;
|
||||
video.play();
|
||||
},
|
||||
function(err) {
|
||||
console.log("An error occured! " + err);
|
||||
}
|
||||
);
|
||||
|
||||
video.addEventListener('canplay', function(ev){
|
||||
if (!streaming) {
|
||||
height = video.videoHeight / (video.videoWidth/width);
|
||||
|
||||
// Firefox currently has a bug where the height can't be read from
|
||||
// the video, so we will make assumptions if this happens.
|
||||
|
||||
if (isNaN(height)) {
|
||||
height = width / (4/3);
|
||||
}
|
||||
|
||||
video.setAttribute('width', width);
|
||||
video.setAttribute('height', height);
|
||||
canvas.setAttribute('width', width);
|
||||
canvas.setAttribute('height', height);
|
||||
streaming = true;
|
||||
}
|
||||
}, false);
|
||||
|
||||
startbutton.addEventListener('click', function(ev){
|
||||
takepicture();
|
||||
ev.preventDefault();
|
||||
}, false);
|
||||
|
||||
sendbutton.addEventListener('click', function(ev){
|
||||
console.log('toto');
|
||||
sendpicture();
|
||||
ev.preventDefault();
|
||||
}, false);
|
||||
|
||||
clearphoto();
|
||||
}
|
||||
|
||||
// Fill the photo with an indication that none has been
|
||||
// captured.
|
||||
|
||||
function clearphoto() {
|
||||
var context = canvas.getContext('2d');
|
||||
context.fillStyle = "#AAA";
|
||||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
var data = canvas.toDataURL('image/png');
|
||||
photo.setAttribute('src', data);
|
||||
}
|
||||
|
||||
// Capture a photo by fetching the current contents of the video
|
||||
// and drawing it into a canvas, then converting that to a PNG
|
||||
// format data URL. By drawing it on an offscreen canvas and then
|
||||
// drawing that to the screen, we can change its size and/or apply
|
||||
// other changes before drawing it.
|
||||
|
||||
function takepicture() {
|
||||
var context = canvas.getContext('2d');
|
||||
if (width && height) {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
context.drawImage(video, 0, 0, width, height);
|
||||
|
||||
var data = canvas.toDataURL('image/png');
|
||||
photo.setAttribute('src', data);
|
||||
} else {
|
||||
clearphoto();
|
||||
}
|
||||
}
|
||||
|
||||
function sendpicture() {
|
||||
var formData = new FormData();
|
||||
|
||||
formData.append('imageData', photo.getAttribute('src'));
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/photo/',
|
||||
data: formData,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function (data) {
|
||||
alert('Your file was successfully uploaded!');
|
||||
window.location='/photo'
|
||||
},
|
||||
error: function (data) {
|
||||
alert('There was an error uploading your file!');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Set up our event listener to run the startup process
|
||||
// once loading is complete.
|
||||
window.addEventListener('load', startup, false);
|
||||
})();
|
||||
Reference in New Issue
Block a user