使用PHP和HTML控制保存图像的大小
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?
You haven't set the width
and height
on the canvas element.
<canvas id="canvas" class="picCapture" width="300" height="300"></canvas>
This is needed for getContext()
you can read more about it here https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext
Also I noticed that the if
statement was failing and this should be a better solution for that.
var id = parseInt(document.getElementById('user_id').value);// get user id
if (Number.isInteger(id)) {
The snapped picture is 300 by 150 pixels because these are the default dimensions of the canvas
and video
element.
You should specify the dimensions for these elements in either HTML, CSS or Javascript.