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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 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站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
Node.js Buffer用法解读
2018/05/18 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python数据类型学习笔记
2016/01/13 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python 5个顶级异步框架推荐
2020/09/09 Python
安全员岗位职责
2013/11/11 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
国培教师自我鉴定
2014/02/12 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
vue 自定义组件添加原生事件
2022/04/21 Vue.js
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android