diff --git a/auth/EVENT_DP.php b/auth/EVENT_DP.php new file mode 100644 index 0000000..dae6b49 --- /dev/null +++ b/auth/EVENT_DP.php @@ -0,0 +1,173 @@ +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); + } + +} + +?> + + diff --git a/auth/process.php b/auth/process.php new file mode 100644 index 0000000..23520e5 --- /dev/null +++ b/auth/process.php @@ -0,0 +1,113 @@ +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 = + '
+ +
+ + Download Image +
+
'; + + $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; +} + + +?> \ No newline at end of file diff --git a/index.html b/index.html index a716343..208ef9a 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - ECX - DP + DP Generator @@ -14,7 +14,7 @@
-

ENGINEERING CAREER EXPO 2019

+

DP Generator

@@ -22,7 +22,7 @@

ENGINEERING CAREER EXPO 2019

Display Picture (DP) Generator

-

Upload photo to create your ECX 2019 DP

+

Upload photo to create your DP

To generate your personalized DP

    @@ -30,25 +30,13 @@

    Display Picture (DP) Generator

  • Upload your picture (for best experience, crop the picture to square)
  • Click on Create your own DP
  • Dont forget to share on - whatsapp, facebook, twitter, - instagram, and make sure you hashtag (#ECX)
    • + instagram, and make sure you hashtag (#DP)
- - -
@@ -92,8 +80,8 @@

Display Picture (DP) Generator

+

@@ -40,64 +36,77 @@ $(function() { `; } }); - }); - /* file input */ - fileInput.on("change", function(e) { - fileInpbtn.css({ display: "none" }); - changebtn.css({ display: "inline-block" }); - deletebtn.css({ display: "inline-block" }); - }); + // appendFileAndSubmit(username, imageData, function(res){ + // if(res.status == "ok"){ + // let temp = res.msg; + // navigateTo("yourdp", temp); + // return true; + // } + // return false; + // }); + }); - /* change image btn */ - changebtn.on("click", function() { - fileInput.click(); - }); + /* file input */ + fileInput.on("change", function(e) { + fileInpbtn.css({display:"none"}); + changebtn.css({display:"inline-block"}); + deletebtn.css({display:"inline-block"}); + }) - /* remove image btn */ - deletebtn.on("click", function() { - let file = document.querySelector("input[type=file]").files[0]; - file.value = null; + /* change image btn */ + changebtn.on("click", function(){ + fileInput.click(); + }) - fileInpbtn.css({ display: "inline-block" }); - changebtn.css({ display: "none" }); - deletebtn.css({ display: "none" }); + /* remove image btn */ + deletebtn.on("click", function(){ + let file = document.querySelector('input[type=file]').files[0]; + file.value = null; - $(".cropit-preview-image").attr("src", ""); - }); + fileInpbtn.css({display:"inline-block"}); + changebtn.css({display:"none"}); + deletebtn.css({display:"none"}); - function b64toBlob(b64Data, contentType, sliceSize) { - contentType = contentType || ""; - sliceSize = sliceSize || 512; + $(".cropit-preview-image").attr("src",""); - var byteCharacters = atob(b64Data); - var byteArrays = []; + }) - for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { - var slice = byteCharacters.slice(offset, offset + sliceSize); - var byteNumbers = new Array(slice.length); - for (var i = 0; i < slice.length; i++) { - byteNumbers[i] = slice.charCodeAt(i); - } + function b64toBlob(b64Data, contentType, sliceSize) { + contentType = contentType || ''; + sliceSize = sliceSize || 512; - var byteArray = new Uint8Array(byteNumbers); - byteArrays.push(byteArray); - } + var byteCharacters = atob(b64Data); + var byteArrays = []; - var blob = new Blob(byteArrays, { type: contentType }); - return blob; - } + for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { + var slice = byteCharacters.slice(offset, offset + sliceSize); + + var byteNumbers = new Array(slice.length); + for (var i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + var byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); + } + + + var blob = new Blob(byteArrays, {type: contentType}); + return blob; + } + + function createDP(username, imageUrl, cb){ + var canvas = document.createElement('canvas'), + ctx = canvas.getContext('2d'), - function createDP(username, imageUrl, cb) { - var canvas = document.createElement("canvas"), - ctx = canvas.getContext("2d"), imageCount = 2, viewW = 800, viewH = 800; var userImg = loadImage(imageUrl); - var frameImg = loadImage("src/img/frame.jpeg"); + var frameImg = loadImage('src/img/frame.jpeg'); function loadImage(src) { var img = new Image(); @@ -116,20 +125,66 @@ $(function() { ctx.drawImage(userImg, 0, 0, viewW, viewH); - cb(canvas.toDataURL('image/jpeg', 1.0)); + cb(canvas.toDataURL()); } } - function navigateTo(view, temp = "") { - switch (view) { - case "yourdp": - main.html(temp); - main.css({ background: "none" }); - break; - default: - main.style.background = "rgb(108, 86, 123)"; - main.innerHTML = mainContent; - } - } - console.log("DOM fully loaded and parsed"); + // function appendFileAndSubmit(username,ImageURL, cb){ + // // Split the base64 string in data and contentType + // var block = ImageURL.split(";"); + + // // Get the content type + // var contentType = block[0].split(":")[1]; + + // // get the real base64 content of the file + // var realData = block[1].split(",")[1]; + + // // Convert to blob + // var blob = b64toBlob(realData, contentType); + + // // Create a FormData and append the file + // var fd = new FormData(); + // fd.append("avatar", ImageURL); + // fd.append("fullname", username); + // fd.append("timestamp", new Date().getTime()); + + // // Submit Form and upload file + // $.ajax({ + // url:"dp/auth/process.php", + // data: fd,// the formData function is available in almost all new browsers. + // type:"POST", + // contentType:false, + // processData:false, + // cache:false, + // dataType:"json", // Change this according to your response from the server. + // error:function(err){ + // console.error(err); + // }, + // success:function(data){ + // (cb && cb !== undefined) && cb(data); + // }, + // complete:function(){ + // console.log("Request finished."); + // } + // }); + + // } + + function navigateTo(view, temp = ""){ + switch(view){ + case "yourdp": + main.html(temp); + main.css({background :"none"}); + break; + default: + main.style.background = "rgb(108, 86, 123)"; + main.innerHTML = mainContent; + } + } + + //remove host ads + const oohost = document.querySelector("body > div"); + oohost.remove(); + console.log("DOM fully loaded and parsed"); + });