Javascript image processing example code _ javascript tips-js tutorial

This article mainly introduces an example of js image processing. For more information, see The Code is as follows:

Var ImgObj = new Image (); // create an Image object
Var AllImgExt = ". jpg |. jpeg |. gif |. bmp |. png |" // All image formats
Var FileObj, ImgFileSize, ImgWidth, ImgHeight, FileExt, ErrMsg, FileMsg, HasCheked, IsImg // global variable image attributes
// The following are restricted Variables
Var AllowExt = ". jpg |. gif |. doc |. txt |" // What types of files can be uploaded? An "|" lowercase letter is required for each extension.
Var AllowImgFileSize = 70; // the size of the image file that can be uploaded is 0, and the Unit is KB.
Var AllowImgWidth = 500; // What is the width of the image that can be uploaded? Unlimited unit: px (pixels)
Var AllowImgHeight = 500; // What is the height of the image that can be uploaded? Unlimited unit: px (pixels)
HasChecked = false;
Function CheckProperty (obj) // checks image attributes.
{
FileObj = obj;
If (ErrMsg! = "") // Check whether 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; // obtain the image file size
ImgWidth = ImgObj. width; // obtain the image width.
ImgHeight = ImgObj. height; // obtain the Image height.
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 & AllowImgWidthErrMsg = ErrMsg + "\ n the image width exceeds the limit. Upload a file whose width is less than "+ AllowImgWidth +" px. The current image width is "+ ImgWidth +" px ";
If (AllowImgHeight! = 0 & allowimgheig1_rmsg = ErrMsg + "\ n the image height exceeds the limit. Upload a file with a height less than "+ AllowImgHeight +" px. The current image height is "+ ImgHeight +" px ";
If (AllowImgFileSize! = 0 & AllowImgFileSizeErrMsg = ErrMsg + "\ n the image file size exceeds the limit. Upload a file smaller 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 message tf = true display file information tf = false Display error message msg-Information Content
{
Msg = msg. replace ("\ n ","

");
Msg = msg. replace (/\ n/gi ,"

");
If (! Tf)
{
FileObj. outerHTML = FileObj. outerHTML;
MsgList. innerHTML = msg;
HasChecked = false;
} Else {
If (IsImg) PreviewImg. innerHTML = "";
Else PreviewImg. innerHTML = "non-image files ";
MsgList. innerHTML = msg;
HasChecked = true;
}
}
Function CheckExt (obj)
{
ErrMsg = "";
FileMsg = "";
FileObj = obj;
IsImg = false;
HasChecked = false;
PreviewImg. innerHTML = "preview area ";
If (obj. value = "") return false;
MsgList. innerHTML = "processing file information ...";
FileExt = obj. value. substr (obj. value. lastIndexOf ("."). toLowerCase ();
If (AllowExt! = 0 & AllowExt. indexOf (FileExt + "|") =-1) // determine whether the file type can be uploaded
{
ErrMsg = "\ n this file type cannot be uploaded. Upload a file of the "+ AllowExt +" type. The current file type is "+ FileExt;
ShowMsg (ErrMsg, false );
Return false;
}
If (AllImgExt. indexOf (FileExt + "| ")! =-1) // if the image file is used, the image information is processed.
{
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 );
}
}