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字符串截取函数substr substring slice使用对比
Nov 27 Javascript
常用DOM整理
Jun 16 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
javascript的this关键字详解
May 20 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
python dict乱码如何解决
2020/06/07 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
工程专业应届生求职信
2014/02/19 职场文书
农业项目投资意向书
2015/05/09 职场文书
赞助商致辞
2015/07/30 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis