基于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> < ...
随机推荐
- Android APK反编译详解（非常有用）
如何学习最快呢?无疑是通过研究别人的源代码? 但是,获取别人的源代码,比较困难.本文,仅限于用于学习开发. 这段时间在学Android应用开发,在想既然是用Java开发的应该很好反编译从而得到源代码吧 ...
- jvm在存储区域
当区域执行的数据 JVM存储器的管理分为几个时间之后的数据区的实施:程序计数器.JavaVM栈.本地方法栈.Java堆.方法区(包括常量池的实现). 程序计数器 较小的内存空间,能够看作是当前线 ...
- GRUB三步通(转)
GRUB三步通 ################### GRUB的优点 ################### GRUB 是引导装入器(boot loader) -- 它负责装入内核并引导 Linux ...
- 关于 pthread_cond_wait 和 pthread_cond_signal , signal 无效的问题
关于一个消费者模式,,,引起的问题.. 我在io线程里不断的把一个函数调用放到队列里 然后ruby线程就不断的从这个队列里取出函数之争并运行. 典型的 消费者模式. 我曾经以为是这样... 这是wor ...
- Json.NET提供依赖注
Json.NET提供依赖注 [.NET] 使用Json.NET提供依赖注入功能(Dependence Injection) 前言 在一些小型项目的开发情景里,系统不需要大型DI Framework所提 ...
- LeetCode Merge k Sorted Lists 解决报告
https://oj.leetcode.com/problems/merge-k-sorted-lists/ 归并K已经整理阵列,和分析算法的复杂. 解决报告:无论是不考虑优化,最简单的实现是要重新走 ...
- OCP读书笔记(27) - 题库(ExamG)
601.You need to perform a block media recovery on the tools01.dbf data file in the SALES database by ...
- 用Maven整合SpringMVC+Spring+Hibernate 框架，实现简单的插入数据库数据功能
一.搭建開始前的准备 1.我用的MyEclipse2014版,大家也能够用IDEA. 2.下载Tomcat(免安装解压包).MySQL(zip包下载地址 免安装解压包,优点就是双击启动,最后我会把ba ...
- hdu 逆袭指数
Problem Description 这依然是关于高富帅小明曾经的故事—— 尽管身处逆境,但小明一直没有放弃努力,除了搬砖,小明还研究过东方的八卦以及西方的星座,一直试图在命理上找到自己能够逆袭 ...
- C#操作Xml：使用XmlWriter写Xml
假定创建了XmlWriter的实例变量xmlWriter,下文中将使用此实例变量写Xml 1.如何使用XmlWriter写Xml文档声明 ? // WriteStartDocument方法可以接受一个 ...