Search

Sunday, October 4, 2015
0 comments

JQuery: Define crop section area of image

2:10 AMSunday, October 4, 2015
If you want to crop image then use JQuery Crop plugin. Download JQuery Crop Plugin from Here. Here you get two file, first is jquery.JCrop.js and second one is jquery.Jcrop.css file. Both of these files are used to set the crop section area on image. Lets check the example of Jquery crop section area of image.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="jquery.Jcrop.js"></script>
    <link href="jquery.Jcrop.css" rel="stylesheet" />
    <script>
        $(function () {
            $("#cropimage").Jcrop({
                onSelect: croparea


            });

        })
        function croparea(c) {
            $("#coordinate_x").val(c.x);
            $("#coordinate_y").val(c.y);
            $("#coordinate_w").val(c.w);
            $("#coordinate_h").val(c.h);

        };

    </script>
</head>
<body>
    <div>
        <img src="image/12.PNG" id="cropimage"/>
        <input type="hidden" id="coordinate_x" />
        <input type="hidden" id="coordinate_y" />
        <input type="hidden" id="coordinate_w" />
        <input type="hidden" id="coordinate_h" />

    </div>

</body>
</html>

Code generate the following output

JQuery: Define crop section area of image

Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top