Cropping the image by PHP with Jquery
<?php
session_start();
include ("session/session.php");
include("session/DBConnection.php");
$user= $_SESSION['log']['username'];
$image=mysql_query("SELECT * FROM members WHERE username='$user'");
$row=mysql_fetch_assoc($image);
$_SESSION['image']= $row['image'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Profile</title>
<link rel="stylesheet" type="text/css" href="css/stylelogin.css">
<link rel="stylesheet" type="text/css" href="css/profilestyle.css">
</head>
<!-- ## IMAGE CROP LINKS _ CSS _ JS -->
<link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreviewcrop").src = oFREvent.target.result;
};
};
</script><!-- # END OF CROP -->
<style>
.error{padding-left: 2px;color: #ff0000; font-size:13px;}.main{}
body{}
.space{}
.txt{color:#00BB64; font-size:14px; font: normal 13px "Comic Sans MS", cursive;}
.but{background:#00BB64;color:white;}
em.error {padding-left: 2px;color: #ff0000; font-size:13px;}
em.success {padding-left: 2px;color: #00BB64;}
</style>
<body>
<div id="header">
<div id="top">
<div id="logo">
<img src="images/logo.png" width="103" height="30" />
</div>
<div id="search">
<form action="#" method="post" >
<input name="search" type="text" placeholder="Search" onClick="this.value=''" id="searchbox">
</form>
</div>
</div>
</div>
<!-- END OF THE HEADER FIELD! -->
<div id="page">
<div id="leftcol">
<div id="menu">
<h3 class="headerbar">Sitemap</h3>
<ul>
<li><a href="index.php">» Blogs</a></li>
<li><a href="profile.php">» Profile</a></li>
<li><a href="login.php">» Login</a></li>
<li><a href="register.php">» Signup</a></li>
<li><a href="logout.php">» Logout</a></li>
</ul>
</div>
<!-- MENU END -->
</div><!-- LEFTCOL END -->
<div id="wrap">
<h3 class="headerbarwelcome">site logo</h3>
<div id="loginform">
<div id="propicedit">
<a href="#" class="thumbnail">
<img src="<?php echo $_SESSION['image'];?>" width="150px" height="150px" id="propichere" />
<span><img src="images/propicedit.jpg" /></span>
</a>
<img src="images/googleblog.png" width="15" height="15" style="padding-top:8px; padding-right:8px;" />
<img src="images/wordpress.png" width="15" height="15" style="padding-top:8px; padding-right:8px;" />
<img src="images/facebook.png" width="15" height="15" style="padding-top:8px; padding-right:8px;" />
<img src="images/twitter.png" width="15" height="15" style="padding-top:8px; padding-right:8px;" />
<img src="images/rss.png" width="15" height="15" style="padding-top:8px; padding-right:8px;" />
<img src="images/gplus.png" width="15" height="15" style="padding-top:8px;" />
</div>
<div id="downtopropic">
</div>
<!-- END OF THE PROFILE SITE ! -->
<div id="details">
<form action="propicedit.php" method="post" enctype="multipart/form-data" id="shareform">
<div class="upload">
<input type="file" name="file_upload" id="uploadImage" class="dec"/>
<!-- hidden inputs -->
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</div>
<input name="submit" type="submit" id="save" value="Save" /><br /><hr />
<img id="uploadPreviewcrop" style="display:none; width:406px; border:2px solid #00BB64; margin-bottom:10px;" />
<div id="choose">
<img src="images/point.png" width="10" height="10" /> Choose an image as your LOGO. If you want to CROP the image to make as 150*150 pixels size, Put your mouse over the image to CROP the suitable area.<br /><br />
<img src="images/point.png" width="10" height="10" /> Please upload only 'jpeg', 'jpg', 'png', 'gif'. The database will store 200kb size image. If you want to use more space, you have to wait 'Blogpack' administrator will allow the primer membership.
</div>
</form>
<?php
$valid_exts = array('jpeg', 'jpg', 'png', 'gif');
$max_file_size = 200 * 1024; #200kb
$nw = $nh = 150; # image with # height
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if ( isset($_FILES['file_upload']) ) {
if (! $_FILES['file_upload']['error'] && $_FILES['file_upload']['size'] < $max_file_size) {
$ext = strtolower(pathinfo($_FILES['file_upload']['name'], PATHINFO_EXTENSION));
if (in_array($ext, $valid_exts)) {
$path = 'uploads/' . uniqid() . '.' . $ext;
$size = getimagesize($_FILES['file_upload']['tmp_name']);
$x = (int) $_POST['x'];
$y = (int) $_POST['y'];
$w = (int) $_POST['w'] ? $_POST['w'] : $size[0];
$h = (int) $_POST['h'] ? $_POST['h'] : $size[1];
$data = file_get_contents($_FILES['file_upload']['tmp_name']);
$vImg = imagecreatefromstring($data);
$dstImg = imagecreatetruecolor($nw, $nh);
imagecopyresampled($dstImg, $vImg, 0, 0, $x, $y, $nw, $nh, $w, $h);
imagejpeg($dstImg, $path);
imagedestroy($dstImg);
echo "<img src='$path' id='propichere' />";
$query = "UPDATE members SET image='$path' WHERE username='$user'";
$request = mysql_query($query,$conn);
echo "<meta http-equiv=\"refresh\" content=\"0;URL=propicedit.php\">";
} else {
echo 'unknown problem!';
}
} else {
echo 'file is too small or large';
}
} else {
echo 'file not set';
}
}
?>
</div>
<!-- END OF THE details SITE ! -->
</div>
<!-- END OF THE loginform SITE ! -->
<h3 class="headerbarwelcome">Profile details</h3>
</div><!-- END OF THE WRAP SITE ! -->
<div id="rightcol">
<h3 id="headerbarfeed">News Feed</h3>
<?php require "news.php";?>
</div>
<!-- END OF THE RIGHTCOL SITE ! -->
</div>
<!-- END OF THE PAGE SITE ! -->
</body>
</html>
Post a Comment