cropper实现图片剪切上传
一、引入文件
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="cropper.css">
<script src="cropper.js"></script>
二、html代码
<div class="box">
<img id="image">
</div> <div id="gg">
<input type="file" id="selectImg"/>
<button id="commit">确认</button>
<button id="rotate">旋转</button>
</div>
<!--剪切后预览图片-->
<img id="yulan">
三、js代码
<script>
//图片选择 触发的事件
$("#selectImg").change(function(){
if(!this.files || !this.files[0]){
return
}
var reader = new FileReader();
reader.onload = function(evt) {
var replaceSrc = evt.target.result;
// 更换cropper的图片
$('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真
}
reader.readAsDataURL(this.files[0]);
}) //旋转图片
$("#rotate").click(function(){
$("#image").cropper('rotate',30)
}) //确定裁剪
$("#commit").on("click",function(){
var cas = $('#image').cropper('getCroppedCanvas');// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
console.log(encodeURIComponent(base64))
$("#yulan").prop('src',base64);//预览 }) //初始化 可以给#image元素一张默认图片 就可以直接看效果
$('#image').cropper({//这里是给img 即被裁剪的图片进行参数配置
aspectRatio: 100 / 100,//裁剪框的比例
preview: $('.avatar-preview'),//预览的容器
autoCropArea: 0.5,//初始化裁剪框大小（相对于图片大小做比例）
movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）
dragCrop:false,//不允许重新开裁剪框
resizable:false,//不允许改变裁剪框大小
background:false,
crop: function(data) {
//data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
$('#x').val(data.x);
$('#y').val(data.y);
console.log(data)
//console.log('w'+data.width+' height'+data.height);
},
//这几个回调函数
build: function (e) { //是图片绘制到cropper自动生成的canvas的开始 加载开始
//过渡效果
},
built: function (e) { //加载完成 绘制完成 获取到相应的data }
});
四、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片上传测试</title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="cropper.css">
<script src="cropper.js"></script>
<style type="text/css">
.box {
width: 400px;
height: 400px;
}
#gg{
margin-top:50px;
}
</style>
</head> <body> <div class="box">
<img id="image">
</div> <div id="gg">
<input type="file" id="selectImg"/>
<button id="commit">确认</button>
<button id="rotate">旋转</button>
</div>
<!--剪切后预览图片-->
<img id="yulan">
<script>
//图片选择 触发的事件
$("#selectImg").change(function(){
if(!this.files || !this.files[0]){
return
}
var reader = new FileReader();
reader.onload = function(evt) {
var replaceSrc = evt.target.result;
// 更换cropper的图片
$('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真
}
reader.readAsDataURL(this.files[0]);
}) //旋转图片
$("#rotate").click(function(){
$("#image").cropper('rotate',30)
}) //确定裁剪
$("#commit").on("click",function(){
var cas = $('#image').cropper('getCroppedCanvas');// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
console.log(encodeURIComponent(base64))
$("#yulan").prop('src',base64);//预览 }) //初始化 可以给#image元素一张默认图片 就可以直接看效果
$('#image').cropper({//这里是给img 即被裁剪的图片进行参数配置
aspectRatio: 100 / 100,//裁剪框的比例
preview: $('.avatar-preview'),//预览的容器
autoCropArea: 0.5,//初始化裁剪框大小（相对于图片大小做比例）
movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）
dragCrop:false,//不允许重新开裁剪框
resizable:false,//不允许改变裁剪框大小
background:false,
crop: function(data) {
//data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
$('#x').val(data.x);
$('#y').val(data.y);
console.log(data)
//console.log('w'+data.width+' height'+data.height);
},
//这几个回调函数
build: function (e) { //是图片绘制到cropper自动生成的canvas的开始 加载开始
//过渡效果
},
built: function (e) { //加载完成 绘制完成 获取到相应的data }
});
</script>
</body> </html>
cropper文档地址：http://www.jq22.com/jquery-info9322
cropper实现图片剪切上传的更多相关文章
- Vue项目图片剪切上传——vue-cropper的使用
最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...
- layui+croppers完成图片剪切上传
不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...
- cropper，图片剪辑上传工具的使用
cropper工具是一个功能强,兼容性好的一个图片裁剪和上传工具 GitHub地址:https://github.com/kesixin/Head_Cut_PC <div class=" ...
- 图片剪裁上传插件 - cropper
图片剪裁上传插件 - cropper <style> .photo-container{float: left;width: 300px;height: 300px;} .photo-co ...
- vue中使用cropperjs进行图片裁剪上传
下面代码直接就可以复制使用了,但是需要在本地下个cropperjs,下载命令:npm install cropperjs --save-dev <template> <div id= ...
- 第三百九十节，Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传
第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传 实现原理 前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...
- 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片
2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...
- asp.net实现图片在线上传并在线裁剪
1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
随机推荐
- （转载）Android开发——Android中常见的4种线程池（保证你能看懂并理解）
0．前言 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52415337 使用线程池可以给我们带来很多好处,首先通过线程池中线程的重用 ...
- error while loading shared libraries的解決方法
我是在启动nginx的时候报这个错误,搜索这个错误时发现这篇文章,非本人(小渡博客)原创. 原文地址:http://blog.csdn.net/dumeifang/article/details/29 ...
- Eclipse中代码自动提示功能设置
Eclipse中代码自动提示功能设置 1 打开eclipse→Windows→Preferences→Java→Editor→Content Assist: 修改Auto Activation tri ...
- java内存性能调优编码注意
1.没有必要时请不用使用静态变量 使用Java的开发者都知道,当某个对象被定义为stataic变量所引用,这个对象所占有的内存将不会被回收.有时,开发者会将经常调用的对象或者变量定义为static,以 ...
- 使用Shell脚本对Linux系统和进程资源进行监控
ShellLinux脚本 摘要:Shell语言对于接触Linux的人来说都比较熟悉,它是系统的用户界面,提供了用户与内核进行交互操作的一种接口.本文我们以Bash做为实例总结了使用Shell对系统和进 ...
- 第39章：MongoDB-集群--Replica Sets(副本集)---副本集基本原理
①操作日志oplog Oplog是主节点的local数据库中的一个固定集合,按顺序记录了主节点的每一次写操作,MongoDB的复制功能是使用oplog来实现的,备份节点通过查询这个集合就可以知道需要进 ...
- 05 IO和管道
目录 三种I/O设备 把I/O重定向至文件 使用管道 知识铺垫 1)查看fd-文件描述符 (L) ll /proc/$$/fd 在Linux中,系统打开文件时会随机分配一个编号 ...
- 【repost】前端学习总结（二十三）——前端框架天下三分：Angular React 和 Vue的比较
目录(?)[+] 前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Ang ...
- Eclipse中一些真正常用的快捷键
F2 文件重命名(要使用某个过长的文件名或者不好打的文件名时,直接F2再Ctrl+C非常好用,比如:Validform_v5.3.2_min.js) Ctrl+S 保存当前文件 Ctrl+Shift+ ...
- 文件描述符fd、文件指针fp和vfork()
1. fd:在形式上是一个非负整数.实际上他是一个索引值.指向kernal为每一个进程所维护的该进程打开文件的记录表. 当程序打开一个文件或者创建一个新文件的时候kernal向进程返回一个文件描述符. ...