smartcrop.js智能图片裁剪库


Posted in Javascript onOctober 14, 2015
smartcrop.js 是一个裁图不会裁掉人脸的 JS 插件
今天将为大家介绍一款近期github上很不错的开源库 ? smartcrop.js。它是一款图片处理的智能裁剪库。在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等。然而在网页布局中,为了更好的用户体验,它们往往都需要一些宽度和高度的限制。对于不合适的图片,常常需要为用户提供一种裁剪方式,以此来满足网站更好的用户体验。但是图片默认的裁剪区域往往被显示在一个固定的位置,而这个位置却往往又不是精准的用户裁剪位置。因此今天为大家介绍的这一款开源库,就是为了解决这类问题,并为用户提供更好的用户体验的。
首先我们可以使用npm install smartcrop或者bower install smartcrop来下载它。然后像如下方式使用它:
SmartCrop.crop(image, {
    width: 100,
    height: 100
  }, 
  function(result){
    console.log(result); // {topCrop: {x: 300, y: 200, height: 200, width: 200}}
  });
它会输出一个比较好的最佳图片裁剪位置,如{topCrop: {x: 300, y: 200, height: 200, width: 200}}的数据。
下面是一副来自它的展示网站的案例,请欣赏:
smartcrop.js智能图片裁剪库
github地址: https://github.com/jwagner/smartcrop.js
Javascript 相关文章推荐
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
vue路由插件之vue-route
Jun 13 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
react中的DOM操作实现
Jun 30 Javascript
深入学习JavaScript对象
Oct 13 #Javascript
快速学习JavaScript的6个思维技巧
Oct 13 #Javascript
有关json_decode乱码及NULL的问题
Oct 13 #Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 #Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 #Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 #Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 #Javascript
You might like
php防盗链的常用方法小结
2010/07/02 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php输入数据统一类实例
2015/02/23 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript之函数直接量(function(){})()
2007/06/29 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
JS求平均值的小例子
2013/11/29 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
pandas删除指定行详解
2019/04/04 Python
Python OS模块实例详解
2019/04/15 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
pyspark 随机森林的实现
2020/04/24 Python
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
思想专业自荐信范文
2013/12/25 职场文书
《王二小》教学反思
2014/02/27 职场文书
网站客服岗位职责
2014/04/05 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
安全责任协议书范本
2016/03/23 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS