文件名称:JavaScript开源的的智能图片裁剪库smartcrop.js.zip
文件大小:4.73MB
文件格式:JS
更新时间:2022-08-08 00:29:22
开源项目
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 图片裁剪
【文件预览】:
smartcrop.js-master
----.eslintrc.js(789B)
----bower.json(610B)
----examples()
--------testsuite.js(3KB)
--------face-api.min.js(48B)
--------tracking-min.js(20KB)
--------tracking-face-min.js(178KB)
--------images()
--------jquery.facedetection.min.js(203KB)
--------jquery.js(267KB)
--------underscore.js(14KB)
--------q.js(57KB)
--------testbed.js(8KB)
--------slideshow.js(3KB)
--------testbed.html(4KB)
--------slideshow.html(2KB)
--------testsuite.html(2KB)
--------face-api()
--------style.css(2KB)
--------smartcrop-debug.js(2KB)
----LICENSE(1KB)
----test()
--------benchmark.js(802B)
--------index.html(683B)
--------benchmark-node.js(749B)
--------benchmark.html(473B)
--------smartcrop.js(7KB)
----.prettierrc(26B)
----README.md(9KB)
----.editorconfig(44B)
----package-lock.json(272KB)
----smartcrop.js(17KB)
----package.json(1KB)