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);
}
}