Image Crop Functionality In Model Box

In this tutorial i will described how to create crop image functionality in model box or popup box.
This is very interesting functionality. We have used following jquery library to crop image.
1- Ajax form submit library
2- Imgareaselect library

Step 1:We will create HTML layout.

First we will include library

1
2
<script src="jquery.imgareaselect.js" type="text/javascript"></script>
<script src="jquery.form.js"></script>

Creating div to show image after crop.

1
2
3
4
5
6
<div class="control-group no-margin-bottom">
<label class="control-label width-120">My Avatar :</label>
                  <span class="control-label tl line-height-20px" id="span-change-avatar"><div class="pickArea pull-left">
   <!--<img src=" />!-->
      <img width="128" id="avatar-edit-img" height="128" src="<?php echo getCustomAvatar($userId);?>" /></div>
      </span> </div>

Now we will create model box to uplode and crop 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
<!--model box -->
<div class="modal" id="changePic" style="display: none;top: 62%">
    <div class="modal-header">
    <button class="close closeAvatar" data-dismiss="modal">×</button>
    <h3>Change Profile Picture</h3>
    </div>
    <div class="modal-body">
    <form id="cropimage" method="post" enctype="multipart/form-data" action="<?php echo home_url();?>/profiles/changeAvatar/">
    Upload your image <input type="file" name="photoimg" id="photoimg" />
    <input type="hidden" name="hdn-profile-id" id="hdn-profile-id" value="<?php echo $userId; ?>" />
    <input type="hidden" name="hdn-x1-axis" id="hdn-x1-axis" value="" />
    <input type="hidden" name="hdn-y1-axis" id="hdn-y1-axis" value="" />
    <input type="hidden" name="hdn-x2-axis" value="" id="hdn-x2-axis" />
    <input type="hidden" name="hdn-y2-axis" value="" id="hdn-y2-axis" />
    <input type="hidden" name="hdn-thumb-width" id="hdn-thumb-width" value="" />
    <input type="hidden" name="hdn-thumb-height" id="hdn-thumb-height" value="" />
    
    <div id='preview-avatar-profile'>
</div>
<div id="thumbs" style="padding:5px; width:600p"></div>
</form>

    </div>
    <div class="modal-footer">
                <a href="javascript:void(0)" class="btn btn-close closeAvatar"  data-dismiss="modal"><img height="18px" width="18px" src="<?php echo get_stylesheet_directory_uri(); ?>/wp_home_page/images/Cancel.png">&nbsp;Close</a>
                <input type="button" id="btn-crop" name="submit" value="Crop & Save" />       
            </div>
    
    </div>

Step 2: Java script code:
show the model box when we will click change pic button.

1
2
3
4
5
6
jQuery('#change-pic').live('click', function(e){
        e.preventDefault();
        
        jQuery('#changePic').show();
        
    });

Ajax form submitting and show the image for crop process.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery('#photoimg').live('change', function()   
{ 
jQuery("#preview-avatar-profile").html('');
jQuery("#preview-avatar-profile").html('Uploading....');
jQuery("#cropimage").ajaxForm(
{
target: '#preview-avatar-profile',
success:    function() { 
        jQuery('img#photo').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes,
    });
    }
}).submit();

});

crop image and call save method.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
jQuery('#btn-crop').live('click', function(e){
    e.preventDefault();
    params = {
            targetUrl: 'profiles/saveAvatarTmp/',
            action: 'profiles_controller_saveAvatarTmp',
            x_axis: jQuery('#hdn-x1-axis').val(),
            y_axis : jQuery('#hdn-y1-axis').val(),
            x2_axis: jQuery('#hdn-x2-axis').val(),
            y2_axis : jQuery('#hdn-y2-axis').val(),
            thumb_width : jQuery('#hdn-thumb-width').val(),
            thumb_height:jQuery('#hdn-thumb-height').val()
        };
        saveCropImage(params);
    });
    
    Save image ajax request:
    
    function getSizes(img, 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)
            {

                jQuery('#hdn-x1-axis').val(x_axis);
                jQuery('#hdn-y1-axis').val(y_axis);
                jQuery('#hdn-x2-axis').val(x2_axis);
                jQuery('#hdn-y2-axis').val(y2_axis);
                jQuery('#hdn-thumb-width').val(thumb_width);
                jQuery('#hdn-thumb-height').val(thumb_height);
                
            }
        else
            alert("Please select portion..!");
    }
    
    function saveCropImage(params) {
    jQuery.ajax({
        url: siteurl + params['targetUrl'],
        cache: false,
        dataType: "html",
        data: {
            action: params['action'],
            id: jQuery('#hdn-profile-id').val(),
             t: 'ajax',
                                w1:params['thumb_width'],
                                x1:params['x_axis'],
                                h1:params['thumb_height'],
                                y1:params['y_axis'],
                                x2:params['x2_axis'],
                                y2:params['y2_axis']
        },
        type: 'Post',
       // async:false,
        success: function (response) {
                jQuery("#changePic").hide();
                jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');
                
                jQuery("#avatar-edit-img").attr('src', response);
                jQuery("#preview-avatar-profile").html('');
                jQuery("#photoimg").val();
                AlertManager.showNotification('Image cropped!', 'Click Save Profile button to save image.', 'success');
                
                
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
        }
    });
    }

Step 3:We will define controller method:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/*********************************************************************
     Purpose            : update image.
     Parameters         : null
     Returns            : integer
     ***********************************************************************/
    public function changeAvatar() {
        global $current_user;
        $loggedInId = $current_user->ID;
        $post = isset($_POST) ? $_POST: array();
        $max_width = "500"; 
        $userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
        $path = get_theme_root(). '\images\uploads\tmp';

        $valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
        $name = $_FILES['photoimg']['name'];
        $size = $_FILES['photoimg']['size'];
        if(strlen($name))
        {
        list($txt, $ext) = explode(".", $name);
        if(in_array($ext,$valid_formats))
        {
        if($size<(1024*1024)) // Image size max 1 MB
        {
        $actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
        $filePath = $path .'/'.$actual_image_name;
        $tmp = $_FILES['photoimg']['tmp_name'];
        
        if(move_uploaded_file($tmp, $filePath))
        {
        $width = $this->getWidth($filePath);
            $height = $this->getHeight($filePath);
            //Scale the image if it is greater than the width set above
            if ($width > $max_width){
                $scale = $max_width/$width;
                $uploaded = $this->resizeImage($filePath,$width,$height,$scale);
            }else{
                $scale = 1;
                $uploaded = $this->resizeImage($filePath,$width,$height,$scale);
            }
        $res = $this->Profile->saveAvatar(array(
                        'userId' => isset($userId) ? intval($userId) : 0,
                                                'avatar' => isset($actual_image_name) ? $actual_image_name : '',
                        ));
                        
        //mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
        echo "<img id='photo' class='' src='".getCustomAvatar($userId, true).'?'.time()."' class='preview'/>";
        }
        else
        echo "failed";
        }
        else
        echo "Image file size max 1 MB"; 
        }
        else
        echo "Invalid file format.."; 
        }
        else
        echo "Please select image..!";
        exit;
        
        
    }
    /*********************************************************************
     Purpose            : update image.
     Parameters         : null
     Returns            : integer
     ***********************************************************************/
    public function saveAvatarTmp() {
        global $current_user;
        $loggedInId = $current_user->ID;
        $post = isset($_POST) ? $_POST: array();
        $userId = isset($post['id']) ? intval($post['id']) : 0;
        $path = get_theme_root(). '\\images\uploads\tmp';
        $t_width = 300; // Maximum thumbnail width
        $t_height = 300;    // Maximum thumbnail height

    if(isset($_POST['t']) and $_POST['t'] == "ajax")
    {
        extract($_POST);
        
        $img = get_user_meta($userId, 'user_avatar', true);
        $imagePath = $path.'/'.$img;
        $ratio = ($t_width/$w1); 
        $nw = ceil($w1 * $ratio);
        $nh = ceil($h1 * $ratio);
        $nimg = imagecreatetruecolor($nw,$nh);
        $im_src = imagecreatefromjpeg($imagePath);
        imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w1,$h1);
        imagejpeg($nimg,$imagePath,90);
        
    }
    echo getCustomAvatar($userId, true);
    exit(0);    
    }
    
    /*********************************************************************
     Purpose            : resize image.
     Parameters         : null
     Returns            : image
     ***********************************************************************/
    function resizeImage($image,$width,$height,$scale) {
    $newImageWidth = ceil($width * $scale);
    $newImageHeight = ceil($height * $scale);
    $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
    $source = imagecreatefromjpeg($image);
    imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
    imagejpeg($newImage,$image,90);
    chmod($image, 0777);
    return $image;
}
/*********************************************************************
     Purpose            : get image height.
     Parameters         : null
     Returns            : height
     ***********************************************************************/
function getHeight($image) {
    $sizes = getimagesize($image);
    $height = $sizes[1];
    return $height;
}
/*********************************************************************
     Purpose            : get image width.
     Parameters         : null
     Returns            : width
     ***********************************************************************/
function getWidth($image) {
    $sizes = getimagesize($image);
    $width = $sizes[0];
    return $width;
}

Step 4: Model method to save image path into database.

1
2
3
4
5
6
7
8
9
/*********************************************************************
     Purpose            : save avatar.
     Parameters         : $options 
     Returns            : true/false
     ***********************************************************************/
    function saveAvatar($options){
        //update sql

    }

Result

The following two tabs change content below.
Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>