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 Date对象使用总结
May 14 Javascript
一个简单的js树形菜单
Dec 09 Javascript
jquery foreach使用示例
Sep 12 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
iView框架问题整理小结
Oct 16 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
React中的Context应用场景分析
Jun 11 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+mysql一个名片库程序
2006/10/09 PHP
php 一元分词算法
2009/11/30 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python向图片里添加文字
2019/11/26 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
用python解压分析jar包实例
2020/01/16 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
宣传稿格式范文
2015/07/23 职场文书
英语导游欢迎词
2015/09/30 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript