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一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
浅谈Node.js 中间件模式
Jun 12 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 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
桌面中心(二)数据库写入
2006/10/09 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Jquery 实现弹出层插件
2015/01/28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python交换变量
2008/09/06 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
利用python求积分的实例
2019/07/03 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python安装whl文件过程图解
2020/02/18 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
活动总结怎么写
2014/04/28 职场文书
产品发布会策划方案
2014/05/12 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
班主任自我评价范文
2015/03/11 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
python 实现mysql自动增删分区的方法
2021/04/01 Python