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

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

效果如下图:

http://odyniec.net/projects/imgareaselect/

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.imageWidth);

  16.        $('#width').val(selection.imageHeight);

  17.    }

  18. </script>

坐标图

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


你可能感兴趣的:(截图,页面图片截取,imgateaselect)