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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
js arguments.callee的应用代码
May 07 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
深入学习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
投票管理程序
2006/10/09 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
python发布模块的步骤分享
2014/02/21 Python
python的变量与赋值详细分析
2017/11/08 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
对祖国的寄语大全
2014/04/11 职场文书
路政管理求职信
2014/06/18 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
三下乡个人总结
2015/03/04 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
大学运动会加油稿
2015/07/22 职场文书