This is a camera... but not just a camera... It's a camera with all sorts of hardship behind it...
This is made with capacitor camera plugin.
Unfortunately you can't really customize the buttons or placement so far reading from the Ionic documentation of this plugin, maybe there is a way but we didn't know!
This time, we are working on the camera!
The most important feature I would say is the camera. Because it has to do with the posting of our media and text here as a Social Media.
So first, I work by following the instruction from the Ionic Documentation. I have had some similar experience working with this before so it was much easier except that not all instruction from the documentation actually worked. I had to research and search for alternative method while using the same plugin and indeed it worked at the end but with different code compared to the sample code provided from the instructions.
Now we have a nice working camera where you can take pictures with.
But right after we overcome this obstacle, we met with another.
The uploading of photos function...
I have had absolutely 0 experience in the uploading function even for websites or even just a file upload function. And now I have to figure out how to upload photos using Ionic before week 18.
But luckily, it didn't take long to figure out and test try different methods.
if($_SERVER['REQUEST_METHOD'] === 'POST'){
// $datenow = date('Y-m-d');
$data = json_decode(file_get_contents("php://input"));
// $image = base64_decode($data->postname);
// $image = base64_decode($testimg);
// $img = imagecreatefromstring($image);
$target_dir = "uploads/";
// $target_file = basename($_FILES["dataurl"]["name"]);
$target_file = "img_".$data->usersid."_".uniqid().".png";
// move_uploaded_file($img, $target_path)
// if ($img !== false) {
// header('Content-Type: image/png');
// imagepng($img, $target_path);
// imagedestroy($img);
// }
$target_path = $target_dir . $target_file;
$server_ip = "https://student.amphibistudio.sg/10187403A/POP/db/";
$full_target_path = $server_ip . $target_path;
$imagedata = $data->postname;
$imagedata = str_replace('data:image/png;base64,', '', $imagedata);
$imagedata = str_replace('data:image/jpeg;base64,', '', $imagedata);
$imagedata = str_replace('data:image/jpg;base64,', '', $imagedata);
$imagedata = str_replace(' ', '+', $imagedata);
$sql = $conn->query("INSERT INTO POP_Uploads (usersid, postid, postname, posttype, postdate, posturl, postdesc) VALUES ('".$data->usersid."', '".$data->postid."', '$target_file', 'post', now(), '$full_target_path', '$imagedata')");
if($sql){
$imagedata = base64_decode($imagedata);
file_put_contents($target_path, $imagedata);
//$data->id = $conn->insert_id;
exit(json_encode($data));
}else{
exit(json_encode(array('status' => 'error')));
}
}Here is a short code snippet of the Uploading function I used posted at my blog.
So, the issue here is that, originally they is this imagefromstring function for PHP but it doesn't work for me. therefore I had to seek for alternatives. I manually replace 'data:image/png;base64' part of the string using str_replace so we only get the remaining string after that.
The string is actually a base64 data string, something like a string of data that is actually an image. so to make it into an image and upload it, I used base64_decode to decode the string. Then file_put_contents to upload the image to our targeted path which will be one of the folders on our server. Then, finally we have our image uploaded there.
Thank you!
Comments