sheeley/Image Cropper

## Image Cropper
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<style type="text/css">
    .container {
        position: relative;
        width: auto;
        display: inline-block;
        overflow: hidden;
    }

    .container img {
        opacity: .5;
    }

    .cropped {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        /*border: 1px solid red;*/
        background-repeat: no-repeat !important;
    }

    .demo {
        margin-top: 20px;
        background-repeat: no-repeat !important;
    }
</style>
</head>
<body>
<div class="container">
    <div class="cropped" style="background: url('http://blog.ebay.com/wp-content/uploads/2013/12/Healey_blog-570x398.jpg')"></div>
	<img src="http://blog.ebay.com/wp-content/uploads/2013/12/Healey_blog-570x398.jpg"/>
</div>

<div class="demo" style="background: url('http://blog.ebay.com/wp-content/uploads/2013/12/Healey_blog-570x398.jpg')"></div>
<pre class="data"></pre>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
    var cropSize = {
        top: 0,
        left: 0,
        width: 0,
        height: 0
    };

    function main(){
        var cropped = $('.cropped'),
        container = $('.container'),
        img = $('img');
        cropped.draggable({
            drag: function(event, ui){
                window.cropSize.top = ui.offset.top;
                window.cropSize.left = ui.offset.left;
                var top = (ui.offset.top) ? '-' + (ui.offset.top) + 'px' : 0,
                left = (ui.offset.left) ? '-' + (ui.offset.left) + 'px' : 0;
                cropped.css('background-position', left + ' ' + top);
                updateDemo();
            },
            containment: "parent"
        }).resizable({
            resize: function(event, ui){
                window.cropSize.width = ui.size.width;
                window.cropSize.height = ui.size.height;
                updateDemo()
            }
        });

        function updateDemo(){
            var left = window.cropSize['left'] + 'px',
            top = window.cropSize['top'] + 'px',
            size = {
                'background-position': '-' + left + ' -' + top,
                width: window.cropSize['width'],
                height: window.cropSize['height']
            };
            $(".demo").css(size);
            $('.data').html(JSON.stringify(window.cropSize));
        }

        var top = img.height() / 4,
        left = img.width() / 4,
        css = {
            top: top,
            height: img.height() / 2 + 'px',
            left: left,
            width: img.width() / 2 + 'px',
            'background-position': '-' + left + 'px -' + top + 'px'
        };
        window.cropSize = css;

        cropped.css(css);
        updateDemo();
    }

    main();
    $('img').load(function(){
        main();
    });
</script>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
	<style type="text/css">
	.container {
	position: relative;
	width: auto;
	display: inline-block;
	overflow: hidden;
	}

	.container img {
	opacity: .5;
	}

	.cropped {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	/border: 1px solid red;/
	background-repeat: no-repeat !important;
	}

	.demo {
	margin-top: 20px;
	background-repeat: no-repeat !important;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="cropped" style="background: url('http://blog.ebay.com/wp-content/uploads/2013/12/Healey_blog-570x398.jpg')"></div>
	<img src="http://blog.ebay.com/wp-content/uploads/2013/12/Healey_blog-570x398.jpg"/>
	</div>

	<div class="demo" style="background: url('http://blog.ebay.com/wp-content/uploads/2013/12/Healey_blog-570x398.jpg')"></div>
	<pre class="data"></pre>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
	<script type="text/javascript">
	var cropSize = {
	top: 0,
	left: 0,
	width: 0,
	height: 0
	};

	function main(){
	var cropped = $('.cropped'),
	container = $('.container'),
	img = $('img');
	cropped.draggable({
	drag: function(event, ui){
	window.cropSize.top = ui.offset.top;
	window.cropSize.left = ui.offset.left;
	var top = (ui.offset.top) ? '-' + (ui.offset.top) + 'px' : 0,
	left = (ui.offset.left) ? '-' + (ui.offset.left) + 'px' : 0;
	cropped.css('background-position', left + ' ' + top);
	updateDemo();
	},
	containment: "parent"
	}).resizable({
	resize: function(event, ui){
	window.cropSize.width = ui.size.width;
	window.cropSize.height = ui.size.height;
	updateDemo()
	}
	});

	function updateDemo(){
	var left = window.cropSize['left'] + 'px',
	top = window.cropSize['top'] + 'px',
	size = {
	'background-position': '-' + left + ' -' + top,
	width: window.cropSize['width'],
	height: window.cropSize['height']
	};
	$(".demo").css(size);
	$('.data').html(JSON.stringify(window.cropSize));
	}

	var top = img.height() / 4,
	left = img.width() / 4,
	css = {
	top: top,
	height: img.height() / 2 + 'px',
	left: left,
	width: img.width() / 2 + 'px',
	'background-position': '-' + left + 'px -' + top + 'px'
	};
	window.cropSize = css;

	cropped.css(css);
	updateDemo();
	}

	main();
	$('img').load(function(){
	main();
	});
	</script>
	</body>
	</html>