Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera

uno-de-piera/index.html Secret

Created May 23, 2018 15:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save uno-de-piera/ba84fd93e62d0bd8c441e256e187366e to your computer and use it in GitHub Desktop.
Save uno-de-piera/ba84fd93e62d0bd8c441e256e187366e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/css/imgareaselect-default.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/imgareaselect/0.9.10/js/jquery.imgareaselect.pack.js"></script>
</head>
<body>
<div>
<form>
<img id="picture" class="img-responsive" />
<input type="hidden" name="x" />
<input type="hidden" name="y" />
<input type="hidden" name="width" />
<input type="hidden" name="height" />
</form>
</div>
<script type="text/javascript">
$(document).ready(function () {
jQuery("img#picture").imgAreaSelect({
maxWidth: 3000,
maxHeight: 800,
handles: true,
onSelectEnd: function (img, selection) {
console.log(selection);
jQuery('input[name="x"]').val(selection.x1);
jQuery('input[name="y"]').val(selection.y1);
jQuery('input[name="width"]').val(selection.width);
jQuery('input[name="height"]').val(selection.height);
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment