smartcrop.js智能图片裁剪库

今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js 。它是一款图片处理的智能裁剪库。在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等。然而在网页布局中,为了更好的用户体验,它们往往都需要一些宽度和高度的限制。对于不合适的图片,常常需要为用户提供一种裁剪方式,以此来满足网站更好的用户体验。但是图片默认的裁剪区域往往被显示在一个固定的位置,而这个位置却往往又不是精准的用户裁剪位置。因此今天为大家介绍的这一款开源库,就是为了解决这类问题,并为用户提供更好的用户体验的。

首先我们可以使用 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}}数据

下面是一副来自它的展示网站的案例,请欣赏:

smartcrop.js智能图片裁剪库

更多案例:

  1. http://29a.ch/sandbox/2014/smartcrop/examples/testsuite.html :这里拥有超过1000个图片效果的展示(流量用户请谨慎点击,图片众多);
  2. http://29a.ch/sandbox/2014/smartcrop/examples/testbed.html :这里允许上传本地的图片,并体验其效果;
  3. http://29a.ch/sandbox/2014/smartcrop/examples/slideshow.html :在这里可以尝试用它创建幻灯片。

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

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » smartcrop.js智能图片裁剪库

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址