• Image Upload and Cropping with PHP and Jquery

    In this post implement image cropping functionalities such as upload image file into physical location, cropping image using jquery and resizing image into small resolution.

    Database :-
    Contains user details username, password, email, profile_image and profile_image_small etc.

    1
    2
    3
    4
    5
    6
    7
    8
    
    CREATE TABLE `users` (
    `uid` int(11) AUTO_INCREMENT PRIMARY KEY,
    `username` varchar(255) UNIQUE KEY,
    `password` varchar(100),
    `email` varchar(255) UNIQUE KEY,
    `profile_image` varchar(200),
    `profile_image_small` varchar(200),
    );

    index.php :-
    Contains PHP code uploading image into uploads folder physical location and image path updating in users table set profile_image.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    
    <!--?php 
    include('db.php');
    session_start();
    $session_id=$_SESSION['user'];//  Session ID
    $path = "uploads/";
    $valid_formats = array("jpg", "png", "gif", "bmp");
    if(isset($_POST['submit']))
    {
    $name = $_FILES['photoimg']['name'];
    $size = $_FILES['photoimg']['size'];
    if(strlen($name))
    {
    list($txt, $ext) = explode(".", $name);
    if(in_array($ext,$valid_formats) &#038;& $size<(250*1024))
    {
    $actual_image_name = time().substr($txt, 5).".".$ext;
    $tmp = $_FILES['photoimg']['tmp_name'];
    if(move_uploaded_file($tmp, $path.$actual_image_name))
    {
    mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
    $image="<h1-->Please drag on the image<img id="\&quot;photo\&quot;" alt="" src="uploads/&quot;.$actual_image_name.&quot;" />
     
    <pre lang="PHP">
    //HTML Body
    <!--?php echo $image; ?-->
    Upload your image

    Javascript :-
    $(“img#photo”).imgAreaSelect() - here photo is the ID name of image block and calling imgAreaSelect function for cropping image.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
    1.4.2/jquery.min.js"></script><script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script><script type="text/javascript">// <![CDATA[
    function getSizes(im,obj)
    {
    var x_axis = obj.x1;
    var x2_axis = obj.x2;
    var y_axis = obj.y1;
    var y2_axis = obj.y2;
    var thumb_width = obj.width;
    var thumb_height = obj.height;
    if(thumb_width > 0)
    {
    if(confirm("Do you want to save image..!"))
    {
    $.ajax({
    type:"GET",
    url:"ajax_image.php?t=ajax&#038;img="+$("#image_name").val()+"&#038;w="+
    thumb_width+"&#038;h="+thumb_height+"&#038;x1="+x_axis+"&#038;y1="+y_axis,
    cache:false,
    success:function(rsponse)
    {
    $("#cropimage").hide();
    $("#thumbs").html("");
    $("#thumbs").html("<img src='uploads/"+rsponse+"' />");
    }
    });
    }
    }
    else
    alert("Please select portion..!");
    }
    $(document).ready(function ()
    {
    $('img#photo').imgAreaSelect({
    aspectRatio: '1:1',
    onSelectEnd: getSizes
    });
    });
    // ]]></script>

    ajax_image.php :-
    Contains simple PHP code, resizing cropped image into 100 x 100 pixel and updating into users table profile_image_small.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <?php
    include('db.php');
    session_start();
    $session_id=$_SESSION['user']; // Or Session ID
    $t_width = 100; // Maximum thumbnail width
    $t_height = 100; // Maximum thumbnail height
    $new_name = "small".$session_id.".jpg"; // Thumbnail image name
    $path = "uploads/";
    if(isset($_GET['t']) and $_GET['t'] == "ajax")
    {
    extract($_GET);
    $ratio = ($t_width/$w);
    $nw = ceil($w * $ratio);
    $nh = ceil($h * $ratio);
    $nimg = imagecreatetruecolor($nw,$nh);
    $im_src = imagecreatefromjpeg($path.$img);
    imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
    imagejpeg($nimg,$path.$new_name,90);
    mysql_query("UPDATE users SET profile_image_small='$new_name' WHERE uid='$session_id'");
    echo $new_name."?".time();
    exit;
    }
    ?>

    db.php
    PHP database configuration file

    1
    2
    3
    4
    5
    6
    7
    8
    
    <?php
    $mysql_hostname = "Host name";
    $mysql_user = "UserName";
    $mysql_password = "Password";
    $mysql_database = "Database Name";
    $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
    mysql_select_db($mysql_database, $bd) or die("Could not select database");
    ?>

Comments on this post

Leave a Reply

  • Security Code :


    9 − nine =