shCropbox
Drag and drop cropping a rectangle area from image (or any DOM object).
Pacel Tzonkov (sunhater@sunhater.com) https://github.com/sunhater/shCropbox
License
- MIT License
Installation
Just include jQuery and shCropbox source files
<html>
<head>
...
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="/your/path/to/sh-cropbox.js" type="text/javascript"></script>
<link href="/your/path/to/sh-cropbox.css" type="text/css" />
...
</head>
<body>
...
</body>
</html>Creation
Put your image into HTML body and give it an id attribute.
<img id="cropbox" src="https://www.thewowstyle.com/wp-content/uploads/2015/03/Desktop-Wallpaper-HD2.jpg" width="100%" />Then put such JavaScript code:
$('#cropbox').shCropbox();Now you can move and resize the cropping area. See the browser console. It will output the coordinates (x and y) and the size (width and height) of cropping area and the size of the displayed image (xMax and yMax).
You can set your own callback to get these values using the update option:
$('#cropbox').shCropbox({
update: function(x, y, width, height, xMax, yMax) {
// Your own code
}
});Other Options
Name: min
|
Type: integer
|
Default: 50
|
|---|
Minimum size (width and height) of cropping area
Name: scrollPreventTouch
|
Type: jQuery selector
|
Default: body
|
|---|
Selects the element to disable scrolling when move and resize the cropping area