文档章节

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

二两豆腐
 二两豆腐
发布于 2015/11/24 14:52
字数 274
阅读 16
收藏 0

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

 <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>

坐标图

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


本文出自 “走在未来的路上” 博客,请务必保留此出处http://wtf0313.blog.51cto.com/1093061/1187090

© 著作权归作者所有

二两豆腐
粉丝 22
博文 104
码字总数 88267
作品 0
朝阳
高级程序员
私信 提问
如何利用 Chrome 浏览器实现滚动截屏

作为前端工程师,有时需要将做到一半的网页发送给 PM 和 Designer 来获得他们的反馈。Mac 自带的截屏功能只能截取显示在屏幕上的内容,但是网页长度常常会超出屏幕高度,只依靠这个截图软件无...

流浪的拉多
2018/05/21
0
0
帮助Web开发者提高效率的十款Firefox插件

Firefox浏览器能成为Web开发者和设计者最喜欢的浏览器,一个重要原因就是它有着丰富的插件可以用来辅助我们完成Web开发工作。下面给大家分享十款在Web开发工作中经常会用到的插件,利用好它们...

MrMign
2011/06/23
289
0
Web前端开发与设计

学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作者:Samer Buna 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/...

掘金官方
2018/01/02
0
0
如何开发一个识别二维码的Chrome插件?

如何开发一个识别二维码的Chrome插件? const [text, set] = useState('No QR code found!')const read = (dataUrl) => { }useEffect(() => { }, [])return ( )} 文章被以下专栏收录......

背着灯笼
2018/11/04
0
0
高大上的微信小程序中渲染html内容—技术分享

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 ...

IT智云编程
2018/10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MBTI助你成功,让你更了解你自己

MBTI助你成功,让你更了解你自己 生活总是一个七日接着又一个七日,相信看过第七日的小伙伴,很熟悉这段开场白,人生是一个测试接着又一个测试,上学的时候测试,是为了证明你的智力,可谓从...

蛤蟆丸子
37分钟前
49
0
Android实现App版本自动更新

现在很多的App中都会有一个检查版本的功能。例如斗鱼TV App的设置界面下: 当我们点击检查更新的时候,就会向服务器发起版本检测的请求。一般的处理方式是:服务器返回的App版本与当前手机安...

shzwork
昨天
63
0
npm 发布webpack插件 webpack-html-cdn-plugin

初始化一个项目 npm init 切换到npm源 淘宝 npm config set registry https://registry.npm.taobao.org npm npm config set registry http://registry.npmjs.org 登录 npm login 登录状态......

阿豪boy
昨天
87
0
java基础(16)递归

一.说明 递归:方法内调用自己 public static void run1(){ //递归 run1(); } 二.入门: 三.执行流程: 四.无限循环:经常用 无限递归不要轻易使用,无限递归的终点是:栈内存溢出错误 五.递...

煌sir
昨天
63
0
REST接口设计规范总结

URI格式规范 URI中尽量使用连字符”-“代替下划线”_”的使用 URI中统一使用小写字母 URI中不要包含文件(脚本)的扩展名 URI命名规范 文档(Document)类型的资源用名词(短语)单数命名 集合(Co...

Treize
昨天
69
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部