smartcrop.js 介绍
在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等。然而在网页布局中,为了更好的用户体验,它们往往都需要一些宽度和高度的限制。对于不合适的图片,常常需要为用户提供一种裁剪方式,以此来满足网站更好的用户体验。但是图片默认的裁剪区域往往被显示在一个固定的位置,而这个位置却往往又不是精准的用户裁剪位置 。
smartcrop.js 组件的原理大致是根据颜色饱和度进行范围扩散裁剪。这是js实现的算法,读像素点的颜色然后根据特定的算法(比如算色差,渐变度等)找出可能是重点的部分。
Smartcrop.js使用相当愚蠢的图像处理。简而言之:
使用laplace查找边缘
使用皮肤等颜色查找区域
找到饱和度较高的区域
按选项指定的区域提升区域(例如检测到的面部)
使用滑动窗口生成一组候选作物
使用重要性函数对它们排序,以将细节集中在中心并避免它在边缘。
输出最高等级的候选作物
我们可以使用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,width: 200}}的数据。
网站地址:https://29a.ch/2014/04/03/smartcrop-content-aware-image-cropping
GitHub:https://github.com/jwagner/smartcrop.js
smartcrop.js
官方网站:https://29a.ch/2014/04/03/smartcrop-content-aware-image-cropping
小编说
以上是编程之家为你收集整理的smartcrop.js全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。