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 中令人困惑的变量赋值
Aug 13 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python 学习教程之networkx
2019/04/15 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python字符串的修改方法实例
2019/12/19 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
python解释器安装教程的方法步骤
2020/07/02 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
初婚初育证明
2014/01/14 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
4s店活动策划方案
2014/08/25 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
keepalived + nginx 实现高可用方案
2022/12/24 Servers