Easy Image Cropper

Talk about an easy image cropper.  You need to check this out.

http://deepliquid.com/content/Jcrop.html

Here’s how you might use it to say create a 200×200 cropped image for instance.

1. Include the code

<script src="../Scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
<style type="text/css" media="all">@import "../Styles/jquery.Jcrop.css";</style>

2. Identify an element you want to make croppable

<img id="mycroppable" src="#yoururl" title=""/>

3. Make it croppable in jquery

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            function setImageCropCoords(c) {
                // variables can be accessed here as
                //c.x, c.y, c.x2, c.y2, c.w, c.h
            };

            //cropper
            $("#mycroppable").Jcrop({
                onSelect: setImageCropCoords,
                setSelect: [0, 0, 200, 200],
                minSize: [200, 200],
                maxSize: [200, 200]
            });
        });

    </script>
Advertisements
Next Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: