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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
Vuex的各个模块封装的实现
Jun 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
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
php中动态调用函数的方法
2015/03/16 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
浅谈Python中数据解析
2015/05/05 Python
Python生成不重复随机值的方法
2015/05/11 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python实现将xml导入至excel
2015/11/20 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Pytorch转tflite方式
2020/05/25 Python
解决python运行启动报错问题
2020/06/01 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
四个太阳教学反思
2014/02/01 职场文书
刊首寄语大全
2014/04/11 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
初中思品教学反思
2016/02/20 职场文书
施工安全责任协议书
2016/03/23 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Django框架中模型的用法
2022/06/10 Python