介绍
图像裁剪是许多Web应用程序中的常见任务,通常只要基于图像中心裁切图像即可。但这是一个折衷方案,有时裁剪效果会不尽人意。
Smartcrop.js是Jonas Wagner对内容感知图像裁剪进行实验的结果,于2014年就在GitHub上发布了第一个版本。它使用了相当简单的图像处理和一些规则来尝试实现更好的图像裁剪。
smartcrop-CLI 工具提供了使用命令行来操作 smartcrop.js。
还可以通过smartcrop-gm(通过gm使用图像magick)或smartcrop-sharp(通过sharp使用libvips)从nodejs使用smartcrop。
组件原理
smartcrop.js 组件的原理大致是根据颜色饱和度进行范围扩散裁剪。这是JS实现的算法,读像素点的颜色然后根据特定的算法(比如算色差,渐变度等)找出可能是重点的部分。
Smartcrop.js使用相当愚蠢的图像处理。简而言之:
- 使用laplace(拉普拉斯)查找边缘
- 使用皮肤等颜色查找区域
- 找到饱和度较高的区域
- 按选项指定的区域提升区域(例如检测到的面部)
- 使用滑动窗口生成一组候选作物
- 使用重要性函数对它们排序,以将细节集中在中心并避免它在边缘。
- 输出最高等级的候选作物
安装
使用 npm 命令安装:
npm install smartcrop
或者直接从 git 仓库中下载 smartcrop.js:
https://github.com/jwagner/smartcrop.js
基本使用方法
// you pass in an image as well as the width & height of the crop you
// want to optimize.
smartcrop.crop(image, {
width: 100, height: 100 }).then(function(result) {
console.log(result);
});
或者
SmartCrop.crop(image, {
width: