smartcrop.js智能图片裁剪库
作者:bea
smartcrop.js 是一个裁图不会裁掉人脸的 JS 插件 今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js。它是一款图片处理的智能裁剪库。在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等。然而在网页布局中,为了更好的用户体验,它们往往都需要一些宽度和高度的限制。对于不合适的图片,常常需要为用户提供一种裁剪方式,以此来满足网站更好的用户体验。但是图片默认的裁剪区域往往被显示在一个固定的位置,而这个位
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}}的数据。
下面是一副来自它的展示网站的案例,请欣赏:
猜你喜欢
您可能感兴趣的文章:
- angularJS与bootstrap结合实现动态加载弹出提示内容
- javascript实现动态标签云
- 在Ubuntu系统上安装Node.JS的教程
- jquery实现简单实用的弹出层效果代码
- 简单谈谈node.js 版本控制 nvm和 n
- jQuery实现仿QQ在线客服效果的滚动层代码
- JS实现选中当前菜单后高亮显示的导航条效果
- JS+CSS实现另类带提示效果的竖向导航菜单
- JS利用cookie记忆当前位置的防刷新导航效果
- 如何实现移动端浏览器不显示 pc 端的广告
- JS简单限制textarea内输入字符数量的方法
- Node.js与Sails ~项目结构与Mvc实现及日志机制
- 浅析四种常见的Javascript声明循环变量的书写方式
- 浅谈angular.js中实现双向绑定的方法$watch $digest $apply
- JS更改select内option属性的方法
- JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
- JS实现的最简Table选项卡效果
- JS仿淘宝实现的简单滑动门效果代码
- JavaScript实现的伸展收缩型菜单代码