手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >smartcrop.js智能图片裁剪库
smartcrop.js智能图片裁剪库
摘要: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}}的数据。 下面是一副来自它的展示网站的案例,请欣赏:

Example

github地址:"https://github.com/jwagner/smartcrop.js" target="_blank">https://github.com/jwagner/smartcrop.js

【smartcrop.js智能图片裁剪库】相关文章:

javascript中clipboardData对象用法

多种js图片预加载实现方式分享

javascript制作的滑动图片菜单

javascript转换静态图片,增加粒子动画效果

鼠标图片振动代码

对textarea框的代码调试,而且功能上使用非常方便,酷

简单获取键盘的KeyCode

用javascript制作放大镜放大图片

javascript中eval解析JSON字符串

体验jQuery和AngularJS的不同点及AngularJS的迷人之处

精品推荐
分类导航