Js image processing sample code

  • 2020-03-30 02:55:07
  • OfStack

 
var ImgObj=new Image(); //Create an image object
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//All image format types
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//Image related properties of global variables
//The following are the restricted variables
var AllowExt=".jpg|.gif|.doc|.txt|" //What types of files are allowed to be uploaded? A "|" lowercase letter is added after each extension for unrestricted
var AllowImgFileSize=70; //Allows uploading image files in size 0 of unrestricted units: KB
var AllowImgWidth=500; //Width of image allowed to be uploaded? Is unrestricted unit: px(pixel)
var AllowImgHeight=500; //Height of image allowed to upload? Is unrestricted unit: px(pixel)
HasChecked=false; 
function CheckProperty(obj) //Detect image attributes
{ 
FileObj=obj; 
if(ErrMsg!="") //Detects if an error message is returned and reset for the correct image file
{ 
ShowMsg(ErrMsg,false); 
return false; // return  
} 
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//Gets the size of the image file
ImgWidth=ImgObj.width; //Gets the width of the picture
ImgHeight=ImgObj.height; //Gets the height of the picture
FileMsg="n Image size :"+ImgWidth+"*"+ImgHeight+"px"; 
FileMsg=FileMsg+"n Image file size :"+ImgFileSize+"Kb"; 
FileMsg=FileMsg+"n Image file extension :"+FileExt; 
if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth) 
ErrMsg=ErrMsg+"n The image width exceeds the limit. Please upload the width less than "+AllowImgWidth+"px The current image width is "+ImgWidth+"px"; 
if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) 
ErrMsg=ErrMsg+"n Image height exceeded the limit. Please upload height less than "+AllowImgHeight+"px The current image height is "+ImgHeight+"px"; 
if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) 
ErrMsg=ErrMsg+"n Image file size exceeded the limit. Please upload less than "+AllowImgFileSize+"KB The current file size is "+ImgFileSize+"KB"; 
if(ErrMsg!="") ShowMsg(ErrMsg,false); 
else ShowMsg(FileMsg,true); 
} 
ImgObj.onerror=function(){ErrMsg='n Incorrect image format or damaged image !'} 
function ShowMsg(msg,tf) //Display prompt tf=true display file information tf=false display error message MSG - message content
{ 
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=" Non-picture file "; 
MsgList.innerHTML=msg; 
HasChecked=true; 
} 
} 
function CheckExt(obj) 
{ 
ErrMsg=""; 
FileMsg=""; 
FileObj=obj; 
IsImg=false; 
HasChecked=false; 
PreviewImg.innerHTML=" The preview area "; 
if(obj.value=="")return false; 
MsgList.innerHTML=" File information processing ..."; 
FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase(); 
if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1) //Determines if the file type allows uploading
{ 
ErrMsg="n Upload is not allowed for this file type. Please upload  "+AllowExt+"  The current file type is "+FileExt; 
ShowMsg(ErrMsg,false); 
return false; 
} 
if(AllImgExt.indexOf(FileExt+"|")!=-1) //If the image file, the image information processing
{ 
IsImg=true; 
ImgObj.src=obj.value; 
alert(ImgObj.src); 
alert(Math.round(ImgObj.fileSize/1024*100)/100); 
CheckProperty(obj); 
return false; 
}else{ 
FileMsg="n File extension :"+FileExt; 
ShowMsg(FileMsg,true); 
} 
} 


Related articles: