<!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/
上传图片+浏览+裁切 Demo(无后台处理部分),布布扣,bubuko.com
原文：http://www.cnblogs.com/yedeying/p/3653941.html