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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 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 301转向实现代码
2008/09/18 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP实现的策略模式示例
2019/03/20 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
Python中的多重装饰器
2015/04/11 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python和c语言哪个更适合初学者
2020/06/22 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
大一自我鉴定范文
2013/10/04 职场文书
供用电专业求职信
2014/07/07 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
暑假生活随笔
2015/08/15 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis