Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor #18

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Refactor #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22c797a
Refactoring for open source
geektutor Apr 25, 2019
8eb70d1
Refactored for open source
geektutor Apr 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 173 additions & 0 deletions auth/EVENT_DP.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<?php

class EVENT_DP {

protected $image_name;

function __construct($name)
{
//name of the uploaded file e.g ahmzy.jpg
$this->image_name = $name;
}

function __destruct()
{
$this->image_name = null;
}

public function mergeImage($txt, $fr_img, $av_img, $merge_right, $merge_bottom, $destination_path){

/*
$frame - frame image path
$avatar - avatar image path
$merge_right - margin from right of image
$merge_bottom - margin from left of image
*/

$mime_fr = getimagesize($fr_img);
$mime_av = getimagesize($av_img);

// Load the avatar and the frame to apply the watermark to
if($mime_fr['mime']=='image/png') {
$frame = imagecreatefrompng($fr_img);
}
if($mime_fr['mime']=='image/jpg' || $mime_fr['mime']=='image/jpeg' || $mime_fr['mime']=='image/pjpeg') {
$frame = imagecreatefromjpeg($fr_img);
}

if($mime_av['mime']=='image/png') {
$avatar = imagecreatefrompng($av_img);
}
if($mime_av['mime']=='image/jpg' || $mime_av['mime']=='image/jpeg' || $mime_av['mime']=='image/pjpeg') {
$avatar = imagecreatefromjpeg($av_img);
}

$sx = imagesx($avatar);
$sy = imagesy($avatar);

// Merge the stamp onto our photo with an opacity of 100%
imagecopymerge($frame, $avatar, imagesx($frame) - $sx - $merge_right, imagesy($frame) - $sy - $merge_bottom, 0, 0, imagesx($avatar), imagesy($avatar), 100);

$final_image = $this->addtext($txt, $frame, $av_img, 250, 140);

return $this->saveFile($final_image, $destination_path, $this->image_name);

}

public function createThumbnail($image_name,$new_width,$new_height,$uploadDir,$moveToDir)
{
/*
$image_name - Name of the image which is uploaded
$new_width - Width of the resized photo (maximum)
$new_height - Height of the resized photo (maximum)
$uploadDir - Directory of the original image
$moveToDir - Directory to save the resized image
*/

$path = $uploadDir . $image_name;
$mime = getimagesize($path);

if($mime['mime']=='image/png') {
$src_img = imagecreatefrompng($path);
}
if($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
$src_img = imagecreatefromjpeg($path);
}

$old_x = imageSX($src_img);
$old_y = imageSY($src_img);

if($old_x > $old_y)
{
$thumb_w = $new_width;
$thumb_h = $old_y*($new_height/$old_x);
}

if($old_x < $old_y)
{
$thumb_w = $old_x*($new_width/$old_y);
$thumb_h = $new_height;
}

if($old_x == $old_y)
{
$thumb_w = $new_width;
$thumb_h = $new_height;
}

$dst_img = ImageCreateTrueColor($thumb_w,$thumb_h);
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);

// New save location
$new_thumb_loc = $moveToDir . $image_name;

if($mime['mime']=='image/png') {
$result = imagepng($dst_img,$new_thumb_loc,8);
}
if($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
$result = imagejpeg($dst_img,$new_thumb_loc,80);
}

imagedestroy($dst_img);
imagedestroy($src_img);

return $result;
}

private function addtext($txt, $frame, $av_img, $merge_right, $merge_bottom)
{

// Set the enviroment variable for GD
putenv('GDFONTPATH=' . realpath('.'));

// Set the content-type
// header('Content-type: image/jpeg');

// Create Image From Existing File
$jpg_image = $frame;

// Allocate A Color For The Text
$white = imagecolorallocate($jpg_image, 87, 15, 140);

// Set Path to Font File
$font_path = '../src/fonts/kenyan_coffee/kenyan coffee rg.ttf';

// Set Text to Be Printed On Image
$username = $txt;
$names = explode(" ", $username);
$ycounter = 185;
$indexCounter = 0;

foreach ($names as $text) {
// Print Text On Image
imagettftext($jpg_image, 15, 0, 20, $ycounter, $white, $font_path, $text);
$ycounter += 23;
$indexCounter += 1;
if($indexCounter == 3){
break;
}
}

$text = $txt;

// Send Image to Browser
// imagejpeg($jpg_image);

// Using imagepng() results in clearer text compared with imagejpeg()
// imagepng($frame);

return $jpg_image;
}

private function saveFile($final_image, $destination_path, $new_file_name){
// Save the image to file and free memory
imagepng($final_image, $destination_path.$new_file_name);
// imagejpeg($jpg_image);
return imagedestroy($final_image);
}

}

?>


113 changes: 113 additions & 0 deletions auth/process.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<?php

include_once("EVENT_DP.php");

$year = date("Y");

$uploadDir = "../uploads/".$year."/";
$thumbnailDir = "../uploads/".$year."/";

$destination_folder_for_dp = "../uploads/".$year."/dp/";
$frameImg = "../src/img/frame.jpeg";

// image dimension variable
$img_width = 800;
$img_height = 800;

// image position right:bottom
$margin_right = 400;
$margin_bottom = 400;


if(isset($_POST["avatar"])) {

$time = checkInput($_POST['timestamp']);
$txt = checkInput($_POST['fullname']);

$validextensions = array("jpeg", "jpg", "png");
$temp1 = explode(";", $_POST["avatar"]);
$temp2 = explode(":", $temp1[0]); //e.g data:image/png;
$filetype = $temp2[1]; //file type e.g image/png

$temp3 = explode("/", $filetype); //e.g image/png
$file_extension = $temp3[1]; //png

$imagetempfile = explode(",", $temp1[1]);
$imagefile = $imagetempfile[1];

$name = preg_replace('/\s+/', '_', $txt);
$newfilename = $name.$time .".".$file_extension;
/* $data = base64_decode($imagefile);
$file = $uploadDir . $newfilename;
$success = file_put_contents($file, $data);
$gf = $thumbnailDir.$newfilename;
$img = imagecreatefromjpeg($gf);
imagefilter($img, IMG_FILTER_GRAYSCALE); //first, convert to grayscale
imagefilter($img, IMG_FILTER_CONTRAST, -255); //then, apply a full contrast
$data = base64_decode(imagejpeg($img));
$file = $uploadDir . $newfilename;
$success = file_put_contents($file, $data);
*/
$data = base64_decode($imagefile);
$file = $uploadDir . $newfilename;
$success = file_put_contents($file, $data);
// print $success ? $file : 'Unable to save the file.';

if($success){

// //create dp instance
$dp = new EVENT_DP($newfilename);

//create thumnail
if($dp->createThumbnail($newfilename, $img_width, $img_height, $uploadDir, $thumbnailDir)){

//merge picture
if($dp->mergeImage($txt, $frameImg, $thumbnailDir.$newfilename, $margin_right, $margin_bottom, $destination_folder_for_dp)){

//send merge picture to browser
$message =
'<section class="dp-container">
<a href="?" class="arrow-back "><i class="ti-arrow-left"></i></a>
<div>
<img id="dp_result" src="/dp/uploads/2019/dp/'.$newfilename.'">
<a class="kb-button download-dp btn" href="/dp/uploads/2019/dp/'.$newfilename.'" download="'.$name.'"_ecx'.$year.'">Download Image</a>
</div>
<section>';

$response = array('status' => 'ok', 'msg' => $message);
echo json_encode($response);

}else{
$message = "Image processing failed, please try again.";
$response = array('status' => 'error', 'msg' => $message);
echo json_encode($response);
}

}else{
$message = "Image processing failed, please try again.";
$response = array('status' => 'error', 'msg' => $message);
echo json_encode($response);
}

}else{
$message = "Image processing failed, please try again.";
$response = array('status' => 'error', 'msg' => $message);
echo json_encode($response);
}


}else{
$message = "No file selected";
$response = array('status' => 'error', 'msg' => $message);
echo json_encode($response);
}

function checkInput($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}


?>
24 changes: 6 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ECX - DP</title>
<title>DP Generator</title>
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" type="text/css" href="src/css/style.css">
<link rel="stylesheet" type="text/css" href="src/fonts/themify-icons.css">
Expand All @@ -14,41 +14,29 @@
<body>

<header>
<h1>ENGINEERING CAREER EXPO 2019</h1>
<h1>DP Generator</h1>
</header>

<main>

<section class="under">
<div>
<h2>Display Picture (DP) Generator</h2>
<p class="">Upload photo to create your ECX 2019 DP</p>
<p class="">Upload photo to create your DP</p>
<p class="step">To generate your personalized DP</p>
</div>
<ul>
<li class="ti">Enter your name in the name field below</li>
<li class="ti">Upload your picture (for best experience, crop the picture to square)</li>
<li class="ti">Click on Create your own DP</li>
<li class="ti">Dont forget to share on
<span class="ti-whatsapp" style="color: rgb(0, 250, 0);">whatsapp</span>,
<span class="ti-facebook" style="color: rgb(29, 45, 130);">facebook</span>,
<span class="ti-twitter" style="color: #03A9F4;">twitter</span>,
<span class="ti-instagram" style="color: #00BCD4;">instagram</span>, and make sure you hashtag (#ECX)</li>
<span class="ti-instagram" style="color: #00BCD4;">instagram</span>, and make sure you hashtag (#DP)</li>
</ul>
</section>

<section class="top">

<!--<div class="author-cont">
<p>This webapp was created by a <span class="tint">ECX</span> team member, <span class="tint">Geektutor</span> make sure you checkout his social
page below for his other works: <p>
<ul>
<li><a href="https://twitter.com/Geektutor"><i class="ti-twitter"></i>Geektutor on Twitter</a>
<li><a href="https://github.com/Geektutor"><i class="ti-github"></i>Geektutor on Github</a>
<li><a href="https://www.facebook.com/Geektutor"><i class="ti-facebook"></i>Geektutor on Facebook</a>
</ul>
</div>-->

<form enctype="multipart/form-data" action="" method="POST" onsubmit="event.preventDefault();">
<fieldset>
<legend class="ti-camera"></legend>
Expand Down Expand Up @@ -92,8 +80,8 @@ <h2>Display Picture (DP) Generator</h2>
</main>

<footer>
<p> &copy; ECX 2019. All Rights Reserved. Follow on Twitter
<a href="https://twitter.com/Geektutor" class="social">@Geektutor</p>
<p> &copy; DP 2019. All Rights Reserved. Follow on
<a href="https://github.com/geektutor/dp" class="social">Github</p>
</footer>

<script src="src/js/jquery.min.js"></script>
Expand Down
Loading