js图片裁剪原理(手机自由裁剪任意形状)

前言

今天周刊中提到的那个裁减的开源组件,在本篇中就详细分享了解下这个组件。

正文从这开始~

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

首先我们可以使用npm installsmartcrop或者bower install smartcrop来下载它。然后像如下方式使用它:

js图片裁剪原理(手机自由裁剪任意形状)

它会输出一个比较好的最佳图片裁剪位置,如{topCrop:{x: 300, y: 200, height: 200, width: 200}}的数据。

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

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

后语

大家在项目中有用到不错的开源组件也可以推荐給@早读君

关于本文

长按图片识别图中二维码

发表评论

登录后才能评论