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 相关文章推荐
js拦截alert对话框另类应用
Jan 16 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
jqTransform美化表单
Oct 10 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
Bootstrap每天必学之面板
2015/11/30 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
可靠的数据流传输TCP
2016/03/15 面试题
写好自荐信的几个要点
2013/12/26 职场文书
新学期家长寄语
2014/01/19 职场文书
2014年国培研修感言
2014/03/09 职场文书
党务公开方案
2014/05/06 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
防灾减灾标语
2014/10/07 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
费城故事观后感
2015/06/10 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
新人入职感言
2015/07/31 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书