基于Jcrop的图片上传裁剪加预览
最近自己没事的时候研究了下图片上传，发现之前写的是有bug的，这里自己重新写了一个！
1、页面结构
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="jquery.Jcrop.min.css">
<body>
<form method="post" id="uploadimg" name="uploadimg" action="" enctype="multipart/form-data" target="apply_iframe">
<input type="file" id="fileChange" style="color:#000" name="imageFileGuide"/>
</form>
<div class="prew" style="width:300px;height:217px;background:#ccc;position:relative;">
<img src="" id="target" width="100%" style="display:none;position:absolute;top:0;left:0;"/>
<div id="filterPrew" style="display:none;position:absolute;top:0;left:0;"></div>
<img src="" id="filterPrewLoad" style="display:none;" />
</div>
<label>X1坐标</label><input type="text" size="4" id="x1" name="x1" />
<label>Y1坐标</label><input type="text" size="4" id="y1" name="y1" />
<label>X2坐标</label><input type="text" size="4" id="x2" name="x2" />
<label>Y2坐标</label><input type="text" size="4" id="y2" name="y2" />
<label>裁剪的宽</label><input type="text" size="4" id="w" name="w" />
<label>裁剪的高</label><input type="text" size="4" id="h" name="h" />
<label>缩放比例</label><input type="text" size="4" id="R" name="R" value="0"/>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
<script src="upfile.js"></script>
<script>
var dom = $('#fileChange')[0];
var prev = $('.prevw')[0];
szyFile.init(dom,prev,{'Ratio':1.2,'selectWidth':400,'selectHeight':300});
</script>
js逻辑处理
var szyFile = {
fileDom:null,//html 文件上传控件
preview:null,//图片预览的区域
imgMaxSize:2,//图片大小最大2M
filterDom:[],//符合条件的元素
filterImgDataUrl:[],//图片的dataUrl数据
dragArea:null,//拖放区域
jcrop_api:null,
selectWidth:300,//选框宽度
selectHeight:300,//选框高度
Ratio:1,//上传图片比例
imgRegExp:function(f){
if(!/\.(jpg|jpeg|png)$/i.test(f.name)){
alert('您上传的不是图片,请重新选择后上传！');
return false;
}
return true;
},
clearCoords:function(){
$('#coords input').val('');
},
showCoords:function(c){
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
},
jcropInit:function(ID){
$(ID).Jcrop({
onChange: szyFile.showCoords,
onSelect: szyFile.showCoords,
onRelease: szyFile.clearCoords,
aspectRatio: szyFile.Ratio,
keySupport: false
},function(){
szyFile.jcrop_api = this;
});
$('#coords').on('change','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
szyFile.jcrop_api.setSelect([x1,y1,x2,y2]);
});
},
isSupport:function(){
if(window.File && window.FileReader && window.FileList && window.Blob) {
return true;
} else {
return false;
}
},
setPrew:function(w,h,ID,modle){
var _top = 0;
var _left = 0;
if(w >= h){
var imgB = szyFile.selectWidth/w;
var imgB1 = w/h;
if(h*imgB <= szyFile.selectHeight){
$(ID).css('width',szyFile.selectWidth+'px');
$(ID).css('height',h*imgB+'px');
_top = ((szyFile.selectHeight-h*imgB)/2);
_left = 0;
$(ID).css('top',_top+'px');
$(ID).css('left',_left+'px');
$('#R').val(w/szyFile.selectWidth);
}else{
$(ID).css('width',szyFile.selectHeight*imgB1+'px');
$(ID).css('height',szyFile.selectHeight+'px');
_top = 0;
_left = ((szyFile.selectWidth-szyFile.selectHeight*imgB1)/2);
$(ID).css('top',_top+'px');
$(ID).css('left',_left+'px');
$('#R').val(h/szyFile.selectHeight);
}
szyFile.jcropInit(ID);
$('.jcrop-holder').css({'position':'absolute','top':_top+'px','left':_left+'px'});
if(modle == 0){
$('.jcrop-tracker').css({'filter':'alpha(opacity=30); BACKGROUND-COLOR: white'});
}
}else{
var imgB = szyFile.selectHeight/h;
var imgB1 = h/w;
if(w*imgB <= szyFile.selectWidth){
$(ID).css('width',w*imgB+'px');
$(ID).css('height',szyFile.selectHeight+'px');
_top = 0;
_left = (szyFile.selectWidth - w*imgB)/2;
$(ID).css('top',_top+'px');
$(ID).css('left',_left+'px');
$('#R').val(h/szyFile.selectHeight);
}else{
$(ID).css('width',szyFile.selectWidth+'px');
$(ID).css('height',szyFile.selectWidth*imgB1+'px');
_top = (szyFile.selectHeight - szyFile.selectWidth*imgB1)/2;
_left = 0;
$(ID).css('top',_top+'px');
$(ID).css('left',_left+'px');
$('#R').val(w/szyFile.selectHeight);
}
szyFile.jcropInit(ID);
$('.jcrop-holder').css({'position':'absolute','top':_top+'px','left':_left+'px'});
if(modle == 0){
$('.jcrop-tracker').css({'filter':'alpha(opacity=30); BACKGROUND-COLOR: white'});
}
}
},
select:function(e){
var e = e || window.event;
if(szyFile.isSupport()){
if(szyFile.jcrop_api){
szyFile.jcrop_api.destroy();
$('#target').remove();
$('<img src="" id="target" width="100%" style="display:none;position:absolute;top:0;left:0;"/>').insertBefore('#filterPrew');
}
$('#target').show();
$('#filterPrew').hide();
var files = e.target.files || e.dataTransfer.files;
for(var i = 0, f; f = files[i]; i++){
if(f){
if(szyFile.imgRegExp(f)){
if(f.size > szyFile.imgMaxSize*1024*1024){
alert('图片过大,您上传的图片大于'+szyFile.imgMaxSize+'MB');
return false;
}else{
szyFile.filterDom.push(f);
var reader = new FileReader();
reader.onload = (function(){
return function(e){
$('#target').attr('src',this.result);
var resultImg = this.result;
var img = new Image();
img.onload = function(){
var w = this.width;
var h = this.height;
szyFile.setPrew(w,h,'#target',1);
}
img.src = this.result;
};
})(f);
reader.readAsDataURL(f);
}
}
}
}
}else{
if(szyFile.jcrop_api){
szyFile.jcrop_api.destroy();
$('<div id="filterPrew" style="display:none;position:absolute;top:0;left:0;"></div>').insertAfter('#target');
}
$('#target').hide();
$('#filterPrew').show();
var src = $('#fileChange')[0].value;
try {
var image = new Image();
image.dynsrc = src;
var filesize = image.fileSize;
} catch (err) {
$('#fileChange')[0].select();
src = document.selection.createRange().text;
}
if(!/\.(jpg|jpeg|png)$/i.test(src)){
alert('您上传的不是图片,请重新选择后上传！');
return false;
}
$('#filterPrew').css('filter','none');
$('#filterPrewLoad').css('filter','none');
$('#filterPrew').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "scale", src="'+src+'")');
$('#filterPrewLoad').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "image", src="'+src+'")');
var w = $('#filterPrewLoad').width();
var h = $('#filterPrewLoad').height();
szyFile.setPrew(w,h,'#filterPrew',0);
}
},
fileOnchange:function(elm){
if(elm.addEventListener){
elm.addEventListener('change', this.select, false);
}else{
elm.onchange = function(){
szyFile.select();
}
}
},
fileValue:function(){
return this.fileDom.value;
},
setRadio:function(num){
if(num && num > 0){
szyFile.Ratio = num;
}
},
setSelectWidth:function(num){
if(num && num > 0){
szyFile.selectWidth = num;
}
},
setSelectHeight:function(num){
if(num && num > 0){
szyFile.selectHeight = num;
}
},
setImgMaxSize:function(num){
if(num && num > 0){
szyFile.imgMaxSize = num;
}
},
init:function(dom,prev,config){
if(config.imgMaxSize && config.imgMaxSize > 0){
szyFile.imgMaxSize = config.imgMaxSize;
}
if(config.selectWidth && config.selectWidth > 0){
szyFile.selectWidth = config.selectWidth;
}
if(config.selectHeight && config.selectHeight > 0){
szyFile.selectHeight = config.selectHeight;
}
if(config.Ratio && config.Ratio > 0){
szyFile.Ratio = config.Ratio;
}
if(dom) this.fileDom = dom;
if(prev) this.preview = prev;
this.fileOnchange(dom);
}
}
代码调用如下
$(function(){
var dom = $('#fileChange')[0];
var prev = $('.prevw')[0];
szyFile.init(dom,prev,{'Ratio':1.2,'selectWidth':400,'selectHeight':300});
});
附件下载地址：兼容IE6+ 以上大部分浏览器，特殊浏览器没有测试！
基于Jcrop的图片上传裁剪加预览的更多相关文章
- java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- 分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- 图片上传前的预览（PHP）
1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...
- jquery实现图片上传前本地预览
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- file图片上传之前先预览
链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...
- js实现图片上传后即时预览
//关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...
随机推荐
- MySQL SQL分析(SQL profile)
分析SQL优化运营开销SQL的重要手段.在MySQL数据库.可配置profiling参数启用SQL分析.此参数可以在全局和session水平集.级别则作用于整个MySQL实例,而session级别紧影 ...
- Linux 2.6 完全公平调度算法CFS（Completely Fair Scheduler）
分析
转会http://www.ibm.com/developerworks/cn/linux/l-completely-fair-scheduler/index.html? ca=drs-cn-0125 ...
- CodeForces 277A Learning Languages (并检查集合)
A. Learning Languages time limit per test:2 seconds memory limit per test:256 megabytes The "Be ...
- Java日志性能那些事(转)
在任何系统中,日志都是非常重要的组成部分,它是反映系统运行情况的重要依据,也是排查问题时的必要线索.绝大多数人都认可日志的重要性,但是又有多少人仔细想过该怎么打日志,日志对性能的影响究竟有多大呢?今天 ...
- asp.net学习之GridView事件、GridViewRow对象
原文:asp.net学习之GridView事件.GridViewRow对象 1. GridView控件的事件 GridView有很多事件,事件可以定制控件的外观或者行为.事件分为三类 1.1 ...
- asp.net学习之ado.net(无连接模式中的DataAdapter)
原文:asp.net学习之ado.net(无连接模式中的DataAdapter) 在非连接模式下,主要讨论以下对象:DataAdapter. DataAdpater的作用是在物理存储模式的数据 ...
- 我的MYSQL学习心得（一）
原文:我的MYSQL学习心得(一) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL学习心得(五) 我的MYSQL ...
- projecteuler---->problem=34----Digit factorials
Problem 34 145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 120 = 145. Find the sum of all number ...
- T4模板使用技巧
=============C#.Net 篇目录============== 示例代码:示例代码__你必须懂的T4模板:浅入深出.rar (一)什么是T4模板? T4,即4个T开头的英文字母组合:Tex ...
- 【译】使用requestIdleCallback
原文地址:http://galen-yip.com/2015/10/07/%E3%80%90%E8%AF%91%E3%80%91%E4%BD%BF%E7%94%A8requestIdleCallbac ...