Home >Web Front-end >JS Tutorial >js image processing sample code_javascript skills

js image processing sample code_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:48:411089browse

Copy code The code is as follows:

var ImgObj=new Image(); //Create a Image object
var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|"//All image format types
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked ,IsImg//Global variable image related attributes
//The following are restriction variables
var AllowExt=".jpg|.gif|.doc|.txt|" //File types allowed to be uploaded? Unlimited per A "|" lowercase letter should be added after each extension to indicate
var AllowImgFileSize=70; //The size of the image file allowed to be uploaded. 0 is unlimited unit: KB
var AllowImgWidth=500; //The images allowed to be uploaded The width? is in unlimited units: px (pixels)
var AllowImgHeight=500; //The height of the uploaded image is allowed? is in unlimited units: px (pixels)
HasChecked=false;
function CheckProperty (obj) //Check image attributes
{
FileObj=obj;
if(ErrMsg!="") //Check whether it is the correct image file, return an error message and reset
{
ShowMsg(ErrMsg,false);
return false; //Return
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//Get the size of the image file
ImgWidth=ImgObj.width; //Get the width of the picture
ImgHeight=ImgObj.height; //Get the height of the picture
FileMsg="nPicture size:" ImgWidth "*" ImgHeight "px";
FileMsg=FileMsg "nPicture file size:" ImgFileSize "Kb";
FileMsg=FileMsg "nPicture file extension:" FileExt;
if(AllowImgWidth!=0&&AllowImgWidthErrMsg= ErrMsg "nThe picture width exceeds the limit. Please upload a file with a width smaller than " AllowImgWidth "px. The current image width is " ImgWidth "px";
if(AllowImgHeight!=0&&AllowImgHeightErrMsg=ErrMsg "nThe image height exceeds the limit. Please upload a file with a height less than "AllowImgHeight"px. The current image height is "ImgHeight "px";
if(AllowImgFileSize!=0&&AllowImgFileSizeErrMsg=ErrMsg "nThe image file size exceeds the limit. Please upload files smaller than " AllowImgFileSize "KB, the current file size is " ImgFileSize "KB";
if(ErrMsg!="") ShowMsg(ErrMsg,false);
else ShowMsg(FileMsg,true);
}
ImgObj.onerror=function(){ErrMsg='nThe image format is incorrect or the image is damaged!'}
function ShowMsg(msg,tf) //Display prompt information tf=true Display file information tf=false displays 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="not Image file";
    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="File information processing...";
    FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
    if(AllowExt!=0&&AllowExt.indexOf(FileExt "|")==-1) //Determine whether the file type is allowed to be uploaded
    {
    ErrMsg="nThis file type is not allowed to be uploaded. Please upload a file of " AllowExt " type. The current file type is " FileExt;
    ShowMsg(ErrMsg,false);
    return false;
    }
    if(AllImgExt.indexOf(FileExt "|") !=-1) //If it is an image file, perform 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="nFile extension: " FileExt;
    ShowMsg(FileMsg,true);
    }
    }
  • Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn