imgateaselect插件是一个基于Jquery的一款图片截取插件，这个插件不是真的对图片进行截取，而是对原图片进行图层覆盖，然后通过CSS样式进行相关截取，得到截取图片的坐标位置，利用回调函数，做一些需要的操作，它可以控制截取的大小，长宽比例，初始截取位置等等。

效果如下图：

利用imgateaselect插件实现前端页面图片截取功能_页面图片截取

1、官方地址 http://odyniec.net/projects/imgareaselect/
2、引用相关文件
<head>

  <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />

 <script type="text/javascript" src="scripts/jquery.min.js"></script>

  <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>

</head>
3、对控件进行检测，然后对其进行设置效果
  1. <script type="text/javascript"> 
  2.     $('#idImg').imgAreaSelect({ 
  3.             handles : true, 
  4.             x1 : 120, 
  5.             y1 : 90, 
  6.             x2 : 280, 
  7.             y2 : 210, 
  8.             onSelectEnd : updateCoords 
  9.         }); 
  10. function updateCoords(img, selection) { 
  11.         $('#x1').val(selection.x1); 
  12.         $('#y1').val(selection.y1); 
  13.         $('#x2').val(selection.x2); 
  14.         $('#y2').val(selection.y2); 
  15.         $('#height').val(selection.p_w_picpathWidth); 
  16.         $('#width').val(selection.p_w_picpathHeight); 
  17.     } 
  18. </script>
坐标图

利用imgateaselect插件实现前端页面图片截取功能_页面图片截取_02

详细其他设置，参照官方文档和实例