js图片处理示例代码


Posted in Javascript onMay 12, 2014
var ImgObj=new Image(); //建立一个图像对象 
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//全部图片格式类型 
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量 图片相关属性 
//以下为限制变量 
var AllowExt=".jpg|.gif|.doc|.txt|" //允许上传的文件类型 ?为无限制 每个扩展名后边要加一个"|" 小写字母表示 
var AllowImgFileSize=70; //允许上传图片文件的大小 0为无限制 单位:KB 
var AllowImgWidth=500; //允许上传的图片的宽度 ?为无限制 单位:px(像素) 
var AllowImgHeight=500; //允许上传的图片的高度 ?为无限制 单位:px(像素) 
HasChecked=false; 
function CheckProperty(obj) //检测图像属性 
{ 
FileObj=obj; 
if(ErrMsg!="") //检测是否为正确的图像文件 返回出错信息并重置 
{ 
ShowMsg(ErrMsg,false); 
return false; //返回 
} 
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小 
ImgWidth=ImgObj.width; //取得图片的宽度 
ImgHeight=ImgObj.height; //取得图片的高度 
FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px"; 
FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb"; 
FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt; 
if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth) 
ErrMsg=ErrMsg+"\n图片宽度超过限制。请上传宽度小于"+AllowImgWidth+"px的文件,当前图片宽度为"+ImgWidth+"px"; 
if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) 
ErrMsg=ErrMsg+"\n图片高度超过限制。请上传高度小于"+AllowImgHeight+"px的文件,当前图片高度为"+ImgHeight+"px"; 
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) 
ErrMsg=ErrMsg+"\n图片文件大小超过限制。请上传小于"+AllowImgFileSize+"KB的文件,当前文件大小为"+ImgFileSize+"KB"; 
if(ErrMsg!="") ShowMsg(ErrMsg,false); 
else ShowMsg(FileMsg,true); 
} 
ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'} 
function ShowMsg(msg,tf) //显示提示信息 tf=true 显示文件信息 tf=false 显示错误信息 msg-信息内容 
{ 
msg=msg.replace("\n","<li>"); 
msg=msg.replace(/\n/gi,"<li>"); 
if(!tf) 
{ 
FileObj.outerHTML=FileObj.outerHTML; 
MsgList.innerHTML=msg; 
HasChecked=false; 
}else{ 
if(IsImg) PreviewImg.innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>"; 
else PreviewImg.innerHTML="非图片文件"; 
MsgList.innerHTML=msg; 
HasChecked=true; 
} 
} 
function CheckExt(obj) 
{ 
ErrMsg=""; 
FileMsg=""; 
FileObj=obj; 
IsImg=false; 
HasChecked=false; 
PreviewImg.innerHTML="预览区"; 
if(obj.value=="")return false; 
MsgList.innerHTML="文件信息处理中..."; 
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //判断文件类型是否允许上传 
{ 
ErrMsg="\n该文件类型不允许上传。请上传 "+AllowExt+" 类型的文件,当前文件类型为"+FileExt; 
ShowMsg(ErrMsg,false); 
return false; 
} 
if(AllImgExt.indexOf(FileExt+"|")!=-1) //如果图片文件,则进行图片信息处理 
{ 
IsImg=true; 
ImgObj.src=obj.value; 
alert(ImgObj.src); 
alert(Math.round(ImgObj.fileSize/1024*100)/100); 
CheckProperty(obj); 
return false; 
}else{ 
FileMsg="\n文件扩展名:"+FileExt; 
ShowMsg(FileMsg,true); 
} 
}
Javascript 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
javascript之Partial Application学习
Jan 10 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
jquery实现的一个简单进度条效果实例
May 12 #Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 #Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 #Javascript
Jquery Ajax方法传值到action的方法
May 11 #Javascript
json的定义、标准格式及json字符串检验
May 11 #Javascript
Jquery操作js数组及对象示例代码
May 11 #Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 #Javascript
You might like
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
stripos函数知识点实例分享
2019/02/11 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
通过JS判断网页是否为手机打开
2020/10/28 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python怎么提高计算速度
2020/06/11 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
年会活动策划方案
2014/01/23 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
工程进度款催款函
2015/06/24 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
详解Django中 render() 函数的使用方法
2021/04/22 Python
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL