save image to server from canvas

save image to server from canvas

hi i wanna take image from webcam and save it in server;i use following
code but it does not work.my code take pic and show it in mycanvas but
when i want to get image from mycanvas and send it to server ajax function
does not work.
var webcam = (function () {
var video = document.createElement('video'),
photo = document.getElementById("myCanvas");
function play() {
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true,
audio: true, toString: function () { return
"video,audio"; } }, onSuccess, onError);
} else {
changeStatus('getUserMedia is not supported
in this browser.', true);
}
}
function onSuccess(stream) {
var source;
if (window.webkitURL) {
source =
window.webkitURL.createObjectURL(stream);
} else {
source = stream;
// Opera and Firefox
}
video.autoplay = true;
video.src = source;
changeStatus('Connected.', false);
}
function onError() {
changeStatus('Please accept the getUserMedia
permissions! Refresh to try again.', true);
}
function changeStatus(msg, error) {
var status = document.getElementById('status');
status.innerHTML = msg;
status.style.color = (error) ? 'red' : 'green';
}
var status = document.getElementById()
function setupPhotoBooth() {
var takeButton =
document.getElementById('btnTakePicture');
takeButton.addEventListener('click', takePhoto,
true);
var saveButton =
document.getElementById('btnSave');
saveButton.disabled = true;
saveButton.addEventListener('click', savePhoto,
true);
}
function takePhoto() {
// set our canvas to the same size as our video
photo.width = video.width;
photo.height = video.height;
var context = photo.getContext('2d');
context.drawImage(video, 0, 0, photo.width,
photo.height);
// allow us to save
var saveButton =
document.getElementById('btnSave');
saveButton.disabled = false;
var data = photo.toDataURL("image/png");
data = data.replace("image/png", "");
document.getElementById("<%= eventdata.ClientID
%>").value = data;
}
return {
init: function () {
changeStatus('Please accept the permissions
dialog.', true);
video.width = 320;
video.height = 240;
document.body.appendChild(video);
document.body.appendChild(photo);
navigator.getUserMedia ||
(navigator.getUserMedia =
navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia ||
navigator.msGetUserMedia);
play();
setupPhotoBooth();
} ()
}
})();
function UploadPic() {
// generate the image data
var Pic =
document.getElementById("myCanvas").toDataURL("image/png");
// var Pic =
document.getElementById("eventdata").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
// Sending the image data to Server
$.ajax({
type: 'POST',
url: 'Save_Picture.aspx/UploadPic',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert("Done, Picture Uploaded.");
}
});
}