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 编程引入命名空间的方法
Jun 29 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
深入学习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数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
php常见的魔术方法详解
2014/12/25 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
详解JavaScript的变量
2019/04/04 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python实现端口复用实例代码
2014/07/03 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
详解Python pygame安装过程笔记
2017/06/05 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
如何判断计算机可能已经中马
2013/03/22 面试题
应届生体育教师自荐信
2013/10/03 职场文书
函授本科自我鉴定
2013/11/03 职场文书
行政专员岗位职责
2014/01/02 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
实验心得体会范文
2016/01/25 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers