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

最新推荐文章于 2024-08-22 16:30:34 发布

weixin_34041003

最新推荐文章于 2024-08-22 16:30:34 发布

阅读量213

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/u/2457218/blog/534763

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

效果如下图：

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、对控件进行检测，然后对其进行设置效果

 <script type="text/javascript">   $('#idImg').imgAreaSelect({           handles : true,           x1 : 120,           y1 : 90,           x2 : 280,           y2 : 210,           onSelectEnd : updateCoords       });function updateCoords(img, selection) {       $('#x1').val(selection.x1);       $('#y1').val(selection.y1);       $('#x2').val(selection.x2);       $('#y2').val(selection.y2);       $('#height').val(selection.imageWidth);       $('#width').val(selection.imageHeight);   }</script>

坐标图