源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

smartcrop.js智能图片裁剪库

  • 时间:2020-07-12 19:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:smartcrop.js智能图片裁剪库
smartcrop.js 是一个裁图不会裁掉人脸的 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}}的数据。
下面是一副来自它的展示网站的案例,请欣赏:
[img]https://camo.githubusercontent.com/1086f55f4396e6c34f076b8f4a43c083fc5253d1/687474703a2f2f3239612e63682f73616e64626f782f323031342f736d61727463726f702f6578616d706c652e6a7067[/img]
github地址: [url=https://github.com/jwagner/smartcrop.js]https://github.com/jwagner/smartcrop.js[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部