Day2：Github项目每日优选之Smartcrop.js

疯狂的技术宅

发布于 2021-09-23 08:42:31

93400

代码可运行

运行总次数：0

代码可运行

// Github项目每日优选 第2 篇
// 正文共 1520 字
// 预计阅读时间：8 分钟

各位宝友大家好，今天给大家带来了 smartcrop.js ，它是什么呢？通过名字我们大概能猜出来就是智能裁剪。我用我拙劣的东北英语大概翻译了下：Smartcrop.js 实现了一种算法来为图像找到好的裁剪。它提供了三种使用方式分别是浏览器中、node、和CLI 。

Github是个巨大的仓库，里面有非常多优秀的项目。其实并不是一定star多的项目才值得关注，有很多小而美的项目我们完全可以去关注学习，并及时fork。站在前人的肩膀上造轮子或者直接应用到项目中，这样才能不怕🙅🏻♀️被卷。我们每天争取用最短小的文章，最短的时间，给你带来最大的收益。

smartcrop.js详情

1. smartcrop.js介绍

图像裁剪是许多 Web 应用程序中的常见工作，通常只需切出图像的中心符合我们预期大小就可以了。但其实有时可能会惨遭失败比如如下的例子。

其实我们可以做的更好，Smartcrop.js 是可以对内容感知，智能裁剪图像。它使用相当简单的图像处理和一些规则来尝试创建更好的图像裁剪。

我们再来一张横向的，其实原理都差不多。很多同学会说我不用这个库让用户自己调整不就得了，那就比如你去机场人脸识别买单和你要拿出手机、打开支付宝、打开支付宝、对准被商家。老铁说我就喜欢这样，做人嘛开心最重要。

2. 代码演示

先来一版本cli的

#失败了请sudo mac版本演示
npm install -g smartcrop-cli
brew install imagemagick
#选取宽度和高度为300作为裁剪大小生成square-thumbnail.jpg
smartcrop --width 300 --height 300 photo.jpg square-thumbnail.jpg

这里我拿了王者荣耀的杨戬英雄头像、甚至是风景图都做了测试结果其实还是蛮不错的。

这是浏览器版本的

//image用canvas或者直接img.onload对象都可以
smartcrop.crop(image, { width: 100, height: 100 }).then(function(result) {
  //// smartcrop 将输出您对裁剪的最佳猜测
  // 现在我们就可以基于此数据裁剪图像。
  //{topCrop: {x: 300, y: 200, height: 200, width: 200}}
  console.log(result);
});
//比如传统的jQuery操作就行
//参考网址 view-source:https://29a.ch/sandbox/2014/smartcrop/examples/testsuite.html
$('img').each(function () {
  $(this).load(function () {
    var img = this;
    setTimeout(function () {
      //把上面👆🏻代码写在这
    }, 0);
  });
});

Node.js中使用您可以通过 smartcrop-gm（通过 gm 使用 image magick）或 smartcrop-sharp（通过sharp 使用 libvips）从 nodejs 使用 smartcrop。当然我们也可以在node中使用shell。js直接调用smartcrop-cli.

3 算法概述

作者说自己使用相当笨拙的图像处理工作😂。简而言之

1.边缘寻找使用了laplace
2.查找具有类似皮肤颜色的区域（其实破解滑动验证码的算法有些类似）
3.查找饱和度高的区域
4.选择指定的增强区域（例如检测到的人脸）
5.计算整个图片区域生成一组组数据
6.使用重要性函数对它们进行排名，以将细节集中在中心并避免在边缘。
7.输出排名最高的数据

smartcrop 算法本身被设计为简单、相对快速、小而通用。

在许多情况下，添加人脸检测以确保人脸获得应有的优先级确实是有意义的。有多个 javascript 库可以轻松集成到 smartcrop.js 中。

ccv js / jquery.facedetection 依赖于jQuery
tracking.js 浏览器端最实用
opencv.js C++编译来的非常重7.6M+
node-opencv node中最实用

探索更先进的且JavaScript能用的人脸识别 http://mmlab.ie.cuhk.edu.hk/projects/WIDERFace/WiderFace_Results.html

4 反向思维

前半部分我们一直都在说裁剪，那有的时候我们想把一张图片进行主题色填充成更大一张图片怎么办呢？比如如下的需求。

其实这个并不难我们可以用魔法数字法、八叉树提取法、最小插值法、中位切分法、聚类.......不过smartcrop.js推荐了dont-crop，我们也可以耍起来。

import {getPalette, fitGradient} from 'dont-crop';

const image = new Image();
image.src = "填写你的图片地址即可";
image.onload = () => {
  console.log(getPalette(image));
  // ['#000000', ...]
  console.log(fitGradient(image));
  // 'linear-gradient(#000000, #ffffff)`
}
image.src = 'example.jpg';