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}}的数据。

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

github地址： https://github.com/jwagner/smartcrop.js

赞 (0)

相关推荐

  • 基于原生JS实现图片裁剪

    基于原生JS实现图片裁剪

    下面是我自己写的图片裁剪的功能介绍: 可以利用鼠标拖拉,产生裁剪框 可以改变裁剪框大小 点击确定,返回裁剪数据 原理 完成裁剪的方法有两种: 1.利用HTML5新增拖拽事件drag drop等 2.传统方法,利用鼠标事件,mousedown.mousemove等 在这里,我们采用方法2. 裁剪区域的形成 要进行裁剪首先要形成裁剪区域,这个裁剪区域的形成我们可以与鼠标移动的距离相关联.鼠标移动多远,裁剪区域就有多大.如下图: 如上图所示鼠标的横向移动距离与纵向移动距离共同组成了裁剪区域的宽和高.

  • jquery实现图片裁剪思路及实现

    jquery实现图片裁剪思路及实现

    思路:JS,jquery不能实现图片的裁剪,只是显示了一个假象 我的实现的方式大体如下: 1.将用户选中的图片上传到服务器 2.将选中头像的矩形框在图片上的坐标发送到服务器,包括,矩形框的宽,高,左上角的x,y坐标,图片的高,宽等 3.在服务器上用获得的各个坐标值,以及原始图片,用JAVA进行裁剪. ----------------------------------- jquery 裁剪效果显示,利用imgAreaSelect http://odyniec.net/projects/imgar

  • js+jquery实现图片裁剪功能

    现在我们在使用各大网站的个人中心时,都有个上传个人头像的功能.用户在上传了个人照片之后,可能不符合网站的要求,于是要求用户对照片进行裁剪,最终根据用户裁剪的尺寸生成头像.这个功能真是太棒了,原来不懂js的时候,感觉很神奇,太神奇了.心想哪天要是自己也能搞明白这里面的技术,那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~ 下面我们就来用javascript来实现这个功能吧. 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.

  • javascript 图片裁剪技巧解读

    学php gd库 看到有图片裁剪 正好整一个 嗯 其实挺简单的 php版 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Res

  • JQuery Jcrop 实现图片裁剪的插件

    JQuery Jcrop 实现图片裁剪的插件

    效果如下图请"运行代码"先试下运行,运行后请刷新一次,感受下: body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') t

  • 使用JavaScript+canvas实现图片裁剪

    canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法.我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作. canvas标签只有两个属性:width和height,用来设定画布的宽和高,如果没有通过标签属性或者脚本来设置,默认为300*150; 好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码: 复制代码 代码如下: var selectObj = null; function ImageCrop(c

  • 使用ImageMagick进行图片缩放、合成与裁剪(js+python)

    使用ImageMagick进行图片缩放、合成与裁剪(js+python)

    最近的项目里面需要对书籍的封面进行处理,就是加一条阴影线形成书脊的凹凸感,然后将书脊切出,分成两部分,以便客户端实现打开动画.由于需要在服务器端处理,使用就研究使用imagemagick来进行.同时准备封装了一个Node.js和Python的方法,主要还是讲一下然后使用imagemagick来对图片进行缩放.合成后进行裁剪吧. 首先素材文件如下(左边未处理封面,右边为需要合成上去的阴影): 安装ImageMagick的过程就不讲了,可以参考官网的安装方法:http://www.imagemagi

  • PHP图片裁剪函数（保持图像不变形）

    为了完成图片上传之后自动的裁剪,然后在前台显示出裁剪出的图片.需求如上,源码如下: 复制代码 代码如下: <? *exif_imagetype -- 判断一个图像的类型 *说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ // 获得任意大小图像,不足地方拉伸,不产生变形,不留下空白         function my_image_resize($src_file, $dst_f

  • php+js实现图片的上传、裁剪、预览、提交示例

    首先用到的语言是php.插件imgareaselect(下载地址),没有太多花哨的样式,index.php代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

  • smartcrop.js智能图片裁剪库

    smartcrop.js智能图片裁剪库

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

  • 基于HTML5+JS实现本地图片裁剪并上传功能

    基于HTML5+JS实现本地图片裁剪并上传功能

    最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小).这个功能的需求是:头像最初剪切为一个正方形.如果选择的图片小于规定的头像要求尺寸,那么这整张图片都会作为头像.如果大于规定的尺寸,那么用户可以选择要裁剪的区域.用户点击确定按钮,就将裁剪得到的图片数据发送到服务器,在后端将图片数据保存成一个文件. 要完成上述功能,涉及到的知识有:ajax,canvas和html5中的files接口.我将实现这个功能的代码封装到了4

  • cropper js基于vue的图片裁剪上传功能的实现代码

    前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下.原文:http://www.jb51.net/article/135719.htm 首先下载引入cropper js, npm install cropper js --save 在需要的页面引入:import Cropper from "cropper js" html的代码如下: <template> <div id="demo&quo

  • vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

    前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富. 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧. 第一步:准备开发环境 cropper.js是基于jquery的,所以要先安装jquery 执行命令: npm  install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置,添加标红的一行 第二步:新建图片裁剪组件 ind

  • 基于cropper.js封装vue实现在线图片裁剪组件功能

    基于cropper.js封装vue实现在线图片裁剪组件功能

    效果图如下所示, github:demo下载 cropper.js github:cropper.js 官网(demo) cropper.js 安装 npm或bower安装 npm install cropper # or bower install cropper clone下载:下载地址 git clone https://github.com/fengyuanchen/cropper.git 引用cropper.js 主要引用cropper.js跟cropper.css两个文件 <scri

  • vue.js 实现图片本地预览 裁剪 压缩 上传功能

    以下代码涉及 Vue 2.0 及 ES6 语法. 目标 纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &

  • vue实现移动端图片裁剪上传功能

    vue实现移动端图片裁剪上传功能

    本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下 1. 安装cropperjs依赖库 npm install cropperjs 2. 编写组件SimpleCropper.vue <template> <div class="v-simple-cropper"> <slot> <button @click="upload">上传图片</button> </slot>

随机推荐