HTML5 实现 alarm 壁纸的剪裁(smartcrop.js 教程)

HTML5 herman 1066浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

HTML5 很强大,或者说 JavaScript 编程语言很强大,它们能在网页上实现智能剪裁。制作各种各样的壁纸,例如:alarm壁纸。在还有图片的壁纸上,能智能的分辨出人脸等。本文将借助 smartcrop.js 来实现一款智能图片裁剪。

smartcrop.js 简介

smartcrop.js 是一款内容感知图像裁剪插件。Smartcrop.js实现了一种算法来查找图像的良好作物。

smartcrop.js

smartcrop.js 组件的原理

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

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

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

安装

使用 npm 命令安装:

npm install smartcrop

或者直接从 git 仓库中下载 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: 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}}的数据。

smartcrop.js

smartcrop-CLI 工具提供了使用命令行来操作 smartcrop.js

您可以通过smartcrop-gm(通过gm使用图像magick)或smartcrop-sharp(通过sharp使用libvips)从nodejs使用smartcrop。

最后,更多关于 smartcrop.js 的信息,请参见其 github:https://github.com/jwagner/smartcrop.js

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5 实现 alarm 壁纸的剪裁(smartcrop.js 教程)