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 validate 中文API 附validate.js中文api手册
Jul 31 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
javaScript基础详解
Jan 19 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 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
PHP 程序员应该使用的10个组件
2009/10/31 PHP
php 获取客户端的真实ip
2009/11/30 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python如何实现一个刷网页小程序
2018/11/27 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
为什么说python更适合树莓派编程
2020/07/20 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
中专生自我鉴定书范文
2013/12/28 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
干部下基层实施方案
2014/03/14 职场文书
年度考核自我鉴定
2014/03/19 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
Nginx源码编译安装过程记录
2021/11/17 Servers
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android