在很多项目开发中，经常会遇见上传图片的场景，它可能是用户照片信息，也可能是商品图片等。然而在网页布局中，为了更好的用户体验，它们往往都需要一些宽度和高度的限制。对于不合适的图片，常常需要为用户提供一种裁剪方式，以此来满足网站更好的用户体验。但是图片默认的裁剪区域往往被显示在一个固定的位置，而这个位置却往往又不是精准的用户裁剪位置  。

smartcrop.js 组件的原理大致是根据颜色饱和度进行范围扩散裁剪。这是JS实现的算法，读像素点的颜色然后根据特定的算法（比如算色差，渐变度等）找出可能是重点的部分。

Smartcrop.js使用相当愚蠢的图像处理。简而言之：

1. 使用laplace查找边缘
2. 使用皮肤等颜色查找区域
3. 找到饱和度较高的区域
4. 按选项指定的区域提升区域（例如检测到的面部）
5. 使用滑动窗口生成一组候选作物
6. 使用重要性函数对它们排序，以将细节集中在中心并避免它在边缘。
7. 输出最高等级的候选作物

我们可以使用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}}的数据。  

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1819