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 相关文章推荐
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
JSON 数据格式介绍
Jan 13 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
vue开发简单上传图片功能
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横向重复区域显示二法
2008/09/25 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python匿名函数及应用示例
2019/04/09 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
详解python破解zip文件密码的方法
2020/01/13 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
护士的岗位职责
2013/12/04 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
大二学习计划书范文
2014/04/27 职场文书
实习科室评语
2015/01/04 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers