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 相关文章推荐
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
js选项卡的制作方法
2017/01/23 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
使用python脚本实现查询火车票工具
2018/07/19 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
中专毕业自我鉴定
2013/10/16 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
委托书范本
2014/04/02 职场文书
机关保密承诺书
2014/06/03 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
优秀高中学生评语
2014/12/30 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技