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 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
showModelessDialog()使用详解
2006/09/21 Javascript
超清晰的document对象详解
2007/02/27 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python交易记录整合交易类详解
2019/07/03 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
python动态规划算法实例详解
2020/11/22 Python
绘画专业自荐信范文
2014/02/23 职场文书
骨干教师考核方案
2014/05/09 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL