smartcrop.js——智能图片裁剪库

介绍

图像裁剪是许多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使用相当愚蠢的图像处理。简而言之:

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

安装

使用 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: 
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
smartcrop.js 是一款基于JavaScript 图片处理的智能裁剪。在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等。然而在网页布局中,为了更好的用户体验,它们往往都需要一些宽度和高度的限制。对于不合适的图片,常常需要为用户提供一种裁剪方式,以此来满足网站更好的用户体验。但是图片默认的裁剪区域往往被显示在一个固定的位置,而这个位置却往往又不是精准的用户裁剪位置。因此今天为大家介绍的这一款开源,就是为了解决这类问题,并为用户提供更好的用户体验的。 smartcrop.js 支持: common js amd global export / window 首先我们可以使用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}}的数据。 效果欣赏: 更多案例: http://29a.ch/sandbox/2014/smartcrop/examples/testsuite.html:这里拥有超过1000个图片效果的展示(流量用户请谨慎点击,图片众多); http://29a.ch/sandbox/2014/smartcrop/examples/testbed.html:这里允许上传本地的图片,并体验其效果; http://29a.ch/sandbox/2014/smartcrop/examples/slideshow.html:在这里可以尝试用它创建幻灯片。 标签:smartcrop  图片裁剪

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值