in my web app im using the following piece of code to snap image from webcam and save it on the server :
JS:
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
var pic_id = 0; //picture id
document.getElementById("snap").addEventListener("click", function() {
var id = document.getElementById('user_id').value;// get user id
if(IsNumeric(id)) {
if(pic_id < 8) {
context.drawImage(video, 0, 0, 320, 320);
var image = document.getElementById("canvas"); // get the canvas
var pngUrl = canvas.toDataURL('image/png');
saveImage(pngUrl, id, pic_id);
pic_id++;
} else if (pic_id ==8){
document.getElementById('form-submit').style.pointerEvents = "all";
}
}else {
console.log("please fill up the form before taking pictures");
}
});
}, false);
HTML:
<div id="camera">
<div class="center clear">
<video id="video" class="picCapture" autoplay></video>
<button id="snap" type="button" class="btn btn-default" onclick="return false;">Take Picture</button>
<canvas id="canvas" class="picCapture"></canvas>
</div>
</div>
the problem is no matter what i do the image always saved in the size of 300X150 pixels. i tried finding tracks to the some code defining this measurements but couldn't find any. actually the number 150 doesn't even exists in my project, so it makes wonder if the solution is on the server side??
my saveImage()
function is as follows:
//passes base64 image
function saveImage(image , user_id, pic_id){
jQuery.ajax({
url: '../save.php',
type: 'POST',
data: { pngUrl: image, id: user_id, pic_id: pic_id },
complete: function(data, status)
{
if(status=='success')
{
alert('saved!');
}
}
});
};
and in case its relevant the PHP side of this thing is:
$post_data = $_POST['pngUrl'];
$user_id = $_POST['id'];
$pic_id = $_POST['pic_id']; // get the picture id from the catch-pic.js script
if (!empty($post_data)){
list($type, $post_data) = explode(';', $post_data);
list(, $post_data) = explode(',', $post_data);
$post_data = base64_decode($post_data);
$img_name = $user_id."-a".$pic_id.".png";
$img_path = IMG_PATH.$img_name;
file_put_contents($img_path, $post_data);
}
any idea where can i control the size of the saved image?