jQuery图片剪裁插件Cropper.js的使用
1.引入必要的js和css核心文件
<link rel="stylesheet" href="../css/cropper.css">
<script src="../js/cropper.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
2.构建html,可以将图片或canvas直接包裹到一个块级元素中。small时预览框
<div class="box" style="width: 600px;height: 300px;">
<img id="image" src="../images/Tom.jpg" alt="Picture">
</div>
<div class="small" style="width: 200px;height: 200px;overflow: hidden;"></div>
3.初始化插件及相关参数
var image = document.getElementById("image");
var cropper = new Cropper(image,{
//裁剪框的比例1/1
aspectRatio:NaN,
//视图模式
viewMode:1,//0,1-,2-,3让图片填满画布
//开启预览效果
preview:'.small',
//拖拽模式
// dragMode:'crop',//参数:move-可以移动图片和框,crop-拖拽新建框
dragMode:'move',//参数:move-可以移动图片和框,crop-拖拽新建框 //在调整窗口大小时,会重新渲染cropper
responsive:true,
//在调整窗口大小时,恢复裁剪区
restore:true,
//检查图片是否为跨域图片
checkCrossOrigin:true,
//是否开启遮罩,将未选中的地方暗色处理
modal:true,
//是否显示裁剪的虚线
guides:true,
//将选中的区域亮色处理
highlight:true,//默认
//是否显示网格背景
background:true,
//裁剪框是否在图片的中心
center:true,
//当初始化的时候(是否自动显示裁剪框).
autoCrop:true,
//当初始化时,裁剪框的大小与原图的比例
autoCropArea:0.8,//0.8是默认,1是1比1
//是否允许移动图片
movable:true,//默认为true
//是否允许旋转图片(函数调用时)()
rotatable:true,
//是否允许翻转图片(问题)
scalable:true,
//是否可以缩放图片 zoomable:true,//false为不能放大缩小
//是否可以通过触摸的形式来放大图片(手机端)
zoomOnTouch:true, //是否允许用鼠标来放大货缩小图片
zoomOnWheel:true,
//设置鼠标控制缩放的比例
wheelZoomRatio:0.2, //是否可以移动裁剪框
cropBoxMovable:true,//裁剪框不动,图片动。当movable:true
//是否可以调整裁剪框的大小,默认true
cropBoxResizable:true, //设置dragMode 是否可以相互切换(条件:双击鼠标可以切换)
toggleDragModeOnDblclick:true, //设置Container的w和h
minContainerWidth:0,
minContainerHeight:200,
//设置canvas的w和h
// canvas太大Container装不下
minCanvasWidth:0,
minCanvasHeight:0,
//设置裁剪层
minCropBoxWidth:0,
minCropBoxHeight:100, //一.crop开始-过程-结束的函数
//1.当插件准备完成时,执行此函数
ready:function(e){
// alert("ready");
},
//2.当裁剪框开始移动的时候会执行的函数
cropstart:function(e){
// console.log("start");
},
//3.裁剪框移动的时候会执行的函数(每一帧都会调用)
cropmove:function(e){
// console.log("move");
},
//3.裁剪框移动结束的时候会执行的函数
cropend:function(e){
// console.log("end");
}, //二、重置与清除函数
//1.在裁剪框发生变化的时候会调用的函数
crop:function(e){
// console.log("cropChange");
}
})
//将图像以及裁剪重置为初始状态
cropper.reset();
//清除裁剪框
cropper.clear();
//替换图片,参数1:替换的图片,参数二,boolean是否保持原来的比例
cropper.replace("../images/picture.jpg",false);
//解锁
cropper.enable();
//锁定
cropper.disable();
//销毁cropper,并在图像中将整个cropper销毁(将插件销毁)
cropper.destroy();
//移动x轴坐标,移动图片.相对自己的位置
cropper.move(1,0);
//移动y轴坐标
cropper.move(0,1);
//移动到x,有一个具体的坐标
cropper.moveTo(2,0);
//移动到y
cropper.moveTo(0,2);
//放大
cropper.zoom(0.1);
//缩小
cropper.zoom(-0.1); //放大到,原来的两倍
cropper.zoomTo(2);
//缩小到
cropper.zoomTo(0.2);
//逆时针旋转,度数
cropper.rotate(-45);
//顺时针旋转(正数)
cropper.rotate(45); //逆时针旋转到(正数)
cropper.rotate(-45);
//顺时针旋转(正数)
cropper.rotate(45); //沿y轴翻转,当前轴不变,另一轴为-1
cropper.scale(-1,1); //沿x轴翻转
cropper.scale(1,-1);
//缩放图片x坐标
cropper.scale(-1);
//缩放图片X坐标
cropper.scaleX(0.5);
//缩放图片Y坐标
cropper.scaleY(2); //获取数据信息(裁剪框的数据)
console.log(cropper.getData());
//获取数据信息(裁剪框的数据)
cropper.setData({width:200,height:100});
//获取Container的数据信息,没有setContainerData函数console.log(cropper.getContainerData());
//获取image的数据信息,就是图片大小
console.log(cropper.getImageData());
//获取Canvas的数据信息
console.log(cropper.getCanvasData());
//设置Canvas的数据信息
console.log(cropper.setCanvasData({left:0,top:0,width:200,height:200}));
//获得裁剪框的详细数据
console.log(cropper.getCropBoxData());
//获得裁剪框的详细数据
console.log(cropper.setCropBoxData({left:0,top:100,width:00,height:200}));
//获得裁剪后的图片,裁剪后的base64编码 **********重要***********
$("#message").append(cropper.getCroppedCanvas());
//修改裁剪框的长宽比
cropper.setAspectRatio(1/1);
//设置拖拽模式,none,crop,move
cropper.setDragMode("crop");
//获取canvas绘制的剪裁图像。
在这之后,你可以直接将canvas作为图片显示,或使用canvas.toDataURL方法获取图像的数据链接,或者使用canvas.toBlob方法获取一个blob,并通过FormData方法将它更新到服务器上(如果浏览器支持这些API)
cropper.getCroppedCanvas()
jQuery图片剪裁插件Cropper.js的使用的更多相关文章
- jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...
- jQuery 图片剪裁插件使用之 imgAreaSelect
插件主页:http://odyniec.net/projects/imgareaselect/ 官方网站上说明支持的浏览器:The plugin works in all major browsers ...
- jquery头像上传剪裁插件cropper的前后台demo
因为一个项目要做一个头像上传的功能,因此选择了使用jquery的头像插件cropper,cropper是一款使用简单且功能强大的图片剪裁jQuery插件,但是在使用的时候,有一个很大的坑需要注意,那就 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- 5 款最新的 jQuery 图片裁剪插件
这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
随机推荐
- Oracle实例占用超高CPU排查
CPU主要功能:处理指令.执行操作.要求进行动作.控制时间.处理数据. 结合数据库实例CPU占用高,可能的原因是数据库在执行大量的操作(全表查询.大量排序等). 由于公司没有DBA,遇到数据库问题只能 ...
- 笔记本磁盘中OEM分区的使用
(1).开机进入系统前,按F8,进入Windows 10的高级启动选项,选择“修复计算机”. (2).选择键盘输入方法. (3).如果有管理员密码,需要输入:如果没有设置密码,直接“确定”即可. (4 ...
- Phpstorm 2020-01-04试了可用的激活码【亲测可用】WebStrom
[直接点击试用30天] http://myphp.vip/ 测试时间:2018-10-12可用(v2019.2) 测试时间:2019-12-24可用(v2019.2) 测试时间:2020-01-04可 ...
- css字体样式+文本样式
font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursi ...
- 发布开源项目到Jcenter
前言 为了将阿里云短信开箱即用发布到Jcenter仓库,前前后后花费了1天半的时间,把端午节都搭进去了.终于今天收到了Jcenter的消息,自己发布的包被添加到了Jcenter仓库,也算给开源社区做了 ...
- adworld python-trade | python反编译
附件是.pyc格式的文件. Python程序中,原始程序代码存储在.py文件里,而Python会在执行.py文件的时候,会将.py形式的程序编译成中间式文件(byte-compiled)的.pyc文件 ...
- JBPM4 学习笔记 转
关于JBPM工作流 2. JBPM jBPM,全称是Java Business Process Management,是一种基于J2EE的轻量级工作流管理系统.JBPM使用Hiberna ...
- 极其实用的JS单行代码
个人博客 地址:https://www.wenhaofan.com/a/20190629211647 1.强制布尔值 要将变量强制转换为布尔值而不更改其值: const myBoolean = !! ...
- Windows资源管理器卡死(未响应)的解决办法
前几天笔记本出现一个莫名其妙的问题,不胜其扰,具体表现如下: A.打开资源管理器(我的电脑)时,会出现“正在处理它”的Loading提示,且地址栏会出现绿色进度条,进度条一般会持续几分钟(不影响进入分 ...
- Linux指令(Terminal命令):
刚开始学习Linux,整理了一下常用指令和快捷键,不足的日后补充. 指令:# cd:进入目录 pwd:查看当前所在路径 ls:查看当前所在目录下的所有子目录或者子文件 ls-l | l ...