smartcrop.js智能图片裁剪库
更新时间:2015年10月14日 09:09:09 投稿:hebedich
为了测试这个智能识别插件,我试了很多壁纸图片,都能智能裁剪出图片的主体部分,转而尝试了一下chrome和Firefox以及IE,发现IE只有10以上的版本才支持,chrome和Firefox支持,手机浏览器不支持,这到底是啥黑科技??今天我们就来详细看看
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}}的数据。
下面是一副来自它的展示网站的案例,请欣赏:
github地址: https://github.com/jwagner/smartcrop.js
相关文章
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下2017-12-12JavaScript实战(原生range和自定义特效)简单实例
下面小编就为大家带来一篇JavaScript实战(原生range和自定义特效)简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论