<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/imgareaselect-default.css">
<buttom class="btn upload">upload</buttom>
</head>
<body>
<input type="file" name="" id="file-upload">
<div class="img">
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.imgareaselect.js"></script>
<script>
window.URL = window.URL || window.webkitURL;
$("body").on("change", "#file-upload", function() {
var file = $("#file-upload").get(0).files[0];
var img = new Image();
img.src = window.URL.createObjectURL(file);
img.onload = function(e) {
window.URL.revokeObjectURL(this.src);
load_select();
}
$(".img").append(img);
});
$("body").on("click", ".upload", function() {
var jq = $(".img > img");
var img = jq.attr("src");
var xPos = jq.attr("data-xpos");
var yPos = jq.attr("data-ypos");
var width = jq.attr("data-width");
var height = jq.attr("data-height");
console.log("the range of pic is");
console.log("x: %s, y: %s, w: %s, h: %s", xPos, yPos, width, height);
});
function load_select() {
var jq = $(".img > img");
jq.imgAreaSelect({
selectionColor: "blue",
aspectRatio: "4:3",
selectionOpacity: 0.2,
onSelectEnd: function(img, selection) {
jq.attr("data-xpos", selection.x1);
jq.attr("data-ypos", selection.y1);
jq.attr("data-width", selection.width);
jq.attr("data-height", selection.height);
}
});
}
</script>
</html>
插件：http://odyniec.net/projects/imgareaselect/
