1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

网页图片处理JS代码整理

本帖由 365dn2006-01-04 发布。版面名称:前端开发

  1. 365dn

    365dn New Member

    注册:
    2006-01-04
    帖子:
    123
    赞:
    9
    1,掉链级图片的替代图片
    代码:
    <img src="no.jpg" onerror="this.src='images/logo.gif'">
    
    2.自动缩小大图  7,检测一个图片的长宽尺寸
    代码:
    <script>
    var img=null;
    function s()
    {
    if(img)img.removeNode(true);
    img=document.createElement("img");
    img.style.position="absolute";
    img.style.visibility="hidden";
    img.attachEvent("onreadystatechange",orsc);
    img.attachEvent("onerror",oe);
    document.body.insertAdjacentElement("beforeend",img);
    img.src=inp.value;
    }
    function oe()
    {
    alert("cant load img");
    }
    function orsc()
    {
    if(img.readyState!="complete")return false;
    alert("高:"+img.offsetHeight+"n宽:"+img.offsetWidth);
    }
    </script>
    <input type="file" Name="file" id="inp" value="默认值"><br><input onclick="s()" type="button" value="点我一下给出要上传图片的大小及长、宽" name="button">
    
    3.按比例缩小
    代码:
    <script defer>
    for (var i=0;i<document.images.length;i++){
    document.images.width=document.images.width*0.5
    }
    </script>
    <img src="img/wallpaper.jpg"> 
    

    4.类似Acdsee看大图的时的拖动
    代码:
    <html>
    <head>
    <title>Untitled    Document</title>
    <meta    http-equiv="Content-Type"    content="text/html;    charset=gb2312">
    
    <script    language="JavaScript">
    <!--
    var    scrollcount=0;
    var    dragy;
    var    scrollarrowtop;
    
    function    initdrag()    {
    scrollcount=1;
    dragy=event.clientY;
    document.body.setCapture();
    }
    
    function    startdrag()    {
    if    (scrollcount==1)    {
    window.scrollBy(dragy-event.clientX,dragy-event.clientY);
    document.body.style.cursor='hand';
    dragy=event.clientY;
    }
    }
    function    enddrag()    {
    document.body.style.cursor='';
    scrollcount=0;
    document.body.releaseCapture();
    }
    //    -->
    </script>
    </head>
    
    <body    bgcolor="#FFFFFF"    text="#000000"    onselectstart="return    false;"    onmousedown="initdrag()"    onmousemove="startdrag()"    onmouseup="enddrag()"    scroll=yes>
    
    <img        src="img/wallpaper.jpg">    
    <img        src="img/whitney.jpg">
    
    </body>
    </html>
    
    5.选择图片产生缩略图,最多10个
    代码:
    <html>
    <head>
    <title>Upload Image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <SCRIPT language=Javascript>
    gFlag=false;
    var gMaxSize,gCurrentSize,gUploadSize,gCurInputIndex,gCurImageSrc,gCurOFile;
    gMaxSize="10";
    gCurrentSize=".18";
    gMaxSize=parseFloat(gMaxSize)*1024*1024;
    //gMaxSize=parseFloat("1")*1024;
    gCurrentSize=parseFloat(gCurrentSize)*1024*1024;
    gErr="";
    gUploadSize=0;
    ////////////////////////////////////////////////////
          function validate()
          {
          var lErr;
          lErr="";
              if((gUploadSize+gCurrentSize)>gMaxSize){
                 if(form1.TempAlbum.value!=form1.OldAlbum.value){
                    lErr=".您要上传的图片尺寸大于您的剩余相册容量,请选择上传至"临时相册"n"+lErr;
                    }
                }
          
              if(form1.OldAlbum.value=="0"){
                 if(form1.NewAlbum.value.length==0){
                    lErr=".请输入新相册名称n"+lErr;
                 }
               }
               if(lErr.length>0){
                  alert("错误:n"+lErr);
                  if(lErr.indexOf("请输入新相册名称nn")!=-1){
                      form1.NewAlbum.focus();
                  }
                  return false;
                  }
                 
                  
                form1.submit();
                /*进度条控制*/
                //var winProgress=window.open("progress.htm","progress","width=300,height=250");
                //winProgress.focus();
                /*进度条控制*/
                
                return true;
           }
          
        function handleBadImage() {
            alert('所选图片并非有效的JPG格式!n请重新选择!');
            eval("form1.file"+gCurInputIndex+".outerHTML="<input type="file" name="file"+gCurInputIndex+"" style="width:275"  value="" onChange="FileChange(this);">"");
            eval("form1.file"+gCurInputIndex+".fireEvent("onChange")");
    
            return false;
        }
         
        function handleGoodImage() {
            imgsrc='<img src="'+gCurImageSrc+'" onload="DrawImage(this,'+gCurInputIndex+'); " width="0" height="0">';
            gCurOFile.parentNode.previousSibling.innerHTML=imgsrc;
            return true;
        }
        //////////////////////////////////////////  
          function FileChange(oFile){
            gErr="";
            gUploadSize=0;
            str='';
            gCurOFile=oFile;
            gCurImageSrc=oFile.value;
            inputname=oFile.name;
            i=inputname.substr((inputname.length-1),1);
            gCurInputIndex=i;
            
          if (gCurImageSrc.length>0){
                //check for none jpg
                imgExt=new Image();
                imgExt.onload=handleGoodImage;
                imgExt.onerror=handleBadImage;
                var fileName = gCurImageSrc.replace("", "/"); // NN7
                var imgURL = 'file:///' + fileName;
                
                if((navigator.appVersion.indexOf('Mac')>-1) && (navigator.appVersion.indexOf('MSIE')>-1)){
                    imgURL='file://' + fileName;
                }
                imgExt.src=imgURL;
                //finish check
              
              }
          
          }
          
          function ShowImgOfServer(NewPath,ImgD){
          ImgD.src=NewPath;
          }
          
        /////////////////////////////////////  
        function DrawImage(ImgD,Index){
        var flag=false;
           var image=new Image();
           image.src=ImgD.src;
           ImgD.value=ImgD.src;
           if(image.fileSize>2048000){
              image.outerHTML="";
              gErr+="此图片尺寸过大,图片尺寸应小于2MBn";
              eval("form1.file"+Index+".outerHTML="<input type="file" name="file"+Index+"" style="width:275"  value="" onChange="FileChange(this);">"");
              eval("form1.file"+Index+".fireEvent("onChange")");
              alert("此图片尺寸过大,图片尺寸应小于2MBn");
              return ;
              }
           if(image.src.substr(image.src.length-3,3).toLowerCase()!="jpg"){
              image.outerHTML="";
              gErr+="此图片类型不匹配,只能上传JPG(JPEG)格式文件n";
              eval("form1.file"+Index+".outerHTML="<input type="file" name="file"+Index+"" style="width:275"  value="" onChange="FileChange(this);">"");
              eval("form1.file"+Index+".fireEvent("onChange")");
              alert("此图片类型不匹配,只能上传JPG(JPEG)格式文件n");
              return ;
              }
              tempFileName=image.src;
              var iLastDot;
              iLastLine=tempFileName.lastIndexOf('/');
              if(iLastLine!=-1){
                  tempFileName=tempFileName.substring(iLastLine+1,tempFileName.length);
              }
           if(!CheckIfEnglish(tempFileName)){
              image.outerHTML="";
              gErr+="此图片文件名包含中文或其他不合法字符n文件名只能由'a-z'、'A-Z'、'_'、'-'构成n";
              eval("form1.file"+Index+".outerHTML="<input type="file" name="file"+Index+"" style="width:275"  value="" onChange="FileChange(this);">"");
              eval("form1.file"+Index+".fireEvent("onChange")");
              alert("此图片文件名包含中文或其他不合法字符n文件名只能由'a-z'、'A-Z'、'_'、'-'构成n");
              return ;
           }
    
           if(gErr.length>0){
              return;
              }
           if(image.width>0 && image.height>0){
            flag=true;
            if(image.width/image.height>= 120/80){
             if(image.width>120){  
             ImgD.width=120;
             ImgD.height=(image.height*120)/image.width;
             }else{
             ImgD.width=image.width;  
             ImgD.height=image.height;
             }
             ImgD.alt="图片大小(宽*高): "+image.width+"×"+image.height+"n图片大小: "+image.fileSize+"n图片路径: "+image.src;
             eval('document.all.width'+Index+'.value='+image.width);
             eval('document.all.height'+Index+'.value='+image.height);
             var oCreated=new Date(image.fileModifiedDate);
             eval('document.all.PicUpdateDate'+Index+'.value="'+oCreated.toLocaleString()+'"');
             }
            else{
             if(image.height>80){  
             ImgD.height=80;
             ImgD.width=(image.width*80)/image.height;     
             }else{
             ImgD.width=image.width;  
             ImgD.height=image.height;
             }
             ImgD.alt="图片大小(宽*高): "+image.width+"×"+image.height+"n图片大小: "+image.fileSize+"n图片路径: "+image.src;
             eval('document.all.width'+Index+'.value='+image.width);
             eval('document.all.height'+Index+'.value='+image.height);
             var oCreated=new Date(image.fileModifiedDate);
             
             eval('document.all.PicUpdateDate'+Index+'.value="'+oCreated.toLocaleString()+'"');
             }
             
            }
                    
              if(parseInt(Index)==parseInt(form1.upcount.value)){
                    form1.upcount.value=parseInt(form1.upcount.value)+1;
                    str+='<table width="100%" ><tr valign="middle" ><td align="center" id="tdimg" height="" width="120" ></td><td id="tdfile" >文件'+(parseInt(Index)+1)+':<input onpropertychange="FileChange(this);" type="file" name="file'+(parseInt(Index)+1)+'" style="width:275" ><input id="width'+(parseInt(Index)+1)+'" name="width'+(parseInt(Index)+1)+'"  type="hidden" value=""><input id="height'+(parseInt(Index)+1)+'" name="height'+(parseInt(Index)+1)+'"  type="hidden" value=""><input name="PicUpdateDate'+(parseInt(Index)+1)+'" type="hidden" id="PicUpdateDate'+(parseInt(Index)+1)+'"></td></tr></table>';
                    window.upid.insertAdjacentHTML("beforeEnd",str+'<br>');
                }
    
              gUploadSize+=parseFloat(image.fileSize);
               } 
        //////////////////////////////////////////  
          function AlbumChange(Value){
            if(Value=='0'){
            document.all.sNewAlbum.style.display='inline';
            document.all.NewAlbum.focus();
            }
            else{
            document.all.sNewAlbum.style.display='none';
            }
            return ;
          }
          
          
    function CheckIfEnglish( String )
    { 
        var Letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890-_.";
         var i;
         var c;
          if(String.charAt( 0 )=='-')
        return false;
          if( String.charAt( String.length - 1 ) == '-' )
              return false;
         for( i = 0; i < String.length; i ++ )
         {
              c = String.charAt( i );
          if (Letters.indexOf( c ) < 0)
             return false;
         }
         return true;
    }
    </SCRIPT>
    </head>
    <body >
    <form name="form1" method="post" action="">
      <TABLE align=center bgColor=#cccccc border=0 
                                    borderColorDark=#cccccc borderColorLight=#000000 
                                    cellPadding=5 cellSpacing=1 height=367 
                                    width="500">
        <TBODY>
          <TR vAlign=center> 
            <TD align=left bgColor=#ffffff colSpan=2 
                                    height=269 id=upid vAlign=top> <TABLE cellPadding=3 cellSpacing=1 width="100%">
                <TBODY>
                  <TR vAlign=center> 
                    <TD align=middle bgColor=#ffffff id=tdimg 
                                    width=120></TD>
                    <TD bgColor=#ffffff id=tdfile>文件1: 
                      <INPUT 
                                    name=file1 onpropertychange=FileChange(this); 
                                    style="WIDTH: 275px" type=file> <INPUT id=width1 
                                    name=width1 type=hidden> <INPUT id=height1 
                                    name=height1 type=hidden> <INPUT 
                                    id=PicUpdateDate1 name=PicUpdateDate1 
                                    type=hidden></TD>
                  </TR>
                </TBODY>
              </TABLE></TD>
          </TR>
          <TR bgColor=#eeeeee vAlign=center> 
            <TD align=middle bgColor=#ebebeb colSpan=2 
                                    height=24> <DIV align=left>将图片上传至已有相册 
                <SELECT id=OldAlbum 
                                    name=OldAlbum onchange=AlbumChange(this.value);>
                  <OPTION value=0><新建相册></OPTION>
                  <OPTION 
                                    selected value=365>临时相册</OPTION>
                </SELECT>
                <INPUT 
                                    id=TempAlbum name=TempAlbum type=hidden 
                                    value=365>
                <SPAN id=sNewAlbum 
                                    style="DISPLAY: none">或新建相册 
                <INPUT id=NewAlbum 
                                    maxLength=50 name=NewAlbum onfocus="">
                </SPAN></DIV></TD>
          </TR>
          <TR bgColor=#eeeeee vAlign=center> 
            <TD align=middle bgColor=#ebebeb colSpan=2 
                                    height=24> <DIV align=center><FONT size=2> 
                <INPUT class=bt name=Submit onclick=validate(); type=button value="· 上传已选图片 ·">
                <INPUT id=upcount name=upcount type=hidden 
                                    value=1>
                <INPUT id=from name=from type=hidden>
                </FONT></DIV></TD>
          </TR>
        </TBODY>
      </TABLE>
    </form>
    </body>
    </html>
    
    6.不同的ALT
    代码:
    <SCRIPT language=JavaScript1.2>
    <!--
    tPopWait=50;
    tPopShow=50000;
    showPopStep=10;
    popOpacity=100;
    
    sPop=null;
    curShow=null;
    tFadeOut=null;
    tFadeIn=null;
    tFadeWaiting=null;
    
    document.write("<style type='text/css'id='defaultPopStyle'>");
    document.write(".cPopText { background-color: #FFFFFF; border: 1px #000000 solid; font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
    document.write("</style>");
    document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
    
    function showPopupText(){
    var o=event.srcElement;
    MouseX=event.x;
    MouseY=event.y;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.dypop!=sPop) {
    sPop=o.dypop;
    clearTimeout(curShow);
    clearTimeout(tFadeOut);
    clearTimeout(tFadeIn);
    clearTimeout(tFadeWaiting); 
    if(sPop==null || sPop=="") {
    dypopLayer.innerHTML="";
    dypopLayer.style.filter="Alpha()";
    dypopLayer.filters.Alpha.opacity=0; 
    }
    else {
    if(o.dyclass!=null) popStyle=o.dyclass 
    else popStyle="cPopText";
    curShow=setTimeout("showIt()",tPopWait);
    }
    
    }
    }
    
    function showIt(){
    dypopLayer.className=popStyle;
    dypopLayer.innerHTML=sPop;
    popWidth=dypopLayer.clientWidth;
    popHeight=dypopLayer.clientHeight;
    if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
    else popLeftAdjust=0;
    if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
    else popTopAdjust=0;
    dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
    dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
    dypopLayer.style.filter="Alpha(Opacity=0)";
    fadeOut();
    }
    
    function fadeOut(){
    if(dypopLayer.filters.Alpha.opacity<popOpacity) {
    dypopLayer.filters.Alpha.opacity+=showPopStep;
    tFadeOut=setTimeout("fadeOut()",1);
    }
    else {
    dypopLayer.filters.Alpha.opacity=popOpacity;
    tFadeWaiting=setTimeout("fadeIn()",tPopShow);
    }
    }
    
    function fadeIn(){
    if(dypopLayer.filters.Alpha.opacity>0) {
    dypopLayer.filters.Alpha.opacity-=1;
    tFadeIn=setTimeout("fadeIn()",1);
    }
    }
    document.onmouseover=showPopupText;
    //-->
    </script>
    <img src="images/logo.gif" alt="网页教学网">
    
    6.经常看到一些图片很大,上传后显示会撑满屏幕下面的例子通过检测if(this.width>screen.width-350)then(this.width=screen.width-350)如果该图片的宽度大于“屏幕宽度-350”,则让该图就显示“屏幕宽度-350”这么大小。
    代码:
    原图<br>
    <img src="jsimg/wallpaper.jpg"><br>
    设定大小的图<br>
    <img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350)this.width=screen.width-350">
    
    7.禁止IE6中大尺寸图片的自动缩小
    代码:
    原图,会自动缩小<br>
    <img src="jsimg/wallpaper.jpg"> <br>
    设定不缩小<br>
    <img src="jsimg/wallpaper.jpg" galleryimg="no">
    
    8.去掉用IE6.0浏览图片,当鼠标放到图片上时出现快捷工具(打印、邮寄、另存等)
    代码:
    方法一:
    <META HTTP-EQUIV="imagetoolbar" CONTENT="no">
    方法二:
    <img galleryimg="no">
    定义CSS:
    <style>
    img {nobar:expression(this.galleryImg='no')}
    </style>
    9.去掉热点地图上的区域线框与超链接的线框
    代码:
    <a href="#" onFocus=this.blur()><img src="jsimg/marylin.jpg" border=0></a>
    
    10.可控制上传图片的大小
    代码:
    <script language="JavaScript">
    
    function orsc()
    {
    if(img.readyState!="complete")return false;
    if(img.offsetWidth!=132&&img.offsetHeight!=99){
    alert("您选择的图片大小:"+img.offsetWidth+"X"+img.offsetHeight+"n"+"请选择132X99大小的图片")
    imgT=true;
    }
    //alert("图片大小:"+img.offsetWidth+"X"+img.offsetHeight);
    //alert("图片尺寸:"+img.fileSize);
    }
    function mysubmit(theform)
    {
     if(theform.file1.value=="")
     {
      alert("请点击浏览按钮,选择您要上传的JPG或GIF文件!")
      theform.file1.focus;
      return (false);
     }
     else
     {
      str= theform.file1.value;
      strs=str.toLowerCase();
      lens=strs.length;
      extname=strs.substring(lens-4,lens);
      if(extname!=".jpg" && extname!=".gif")
      {
       alert("请选择JPG或GIF格式的文件!");
       return (false);
      }else{
      document.all("loadImg").src=theform.file1.value
      if(document.all("loadImg").offsetWidth!=132&&document.all("loadImg").offsetHeight!=99){
    alert("您选择的图片大小:"+document.all("loadImg").offsetWidth+"X"+document.all("loadImg").offsetHeight+"n"+"请选择132X99大小的图片")
    return (false)
    }
      }
      
     }
     
    }
    </script>
    <form onSubmit="return mysubmit(this)" name="form" method="post"  enctype="multipart/form-data">
    <table width="100%" border=0 cellspacing=0 cellpadding=0>
    <tr><td valign=top height=30>
    <input type="hidden" name="act" value="upload">
            <input type="file" style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; CURSOR: text; COLOR: #333333; FONT-FAMILY: "MS Shell Dlg", ","Tahoma", ","宋体"; HEIGHT: 20px; BORDER-RIGHT-WIDTH: 1px
    " name="file1"  value=""> 
            <input type="submit" name="Submit" value="上传" > 
          </td>
        </tr>
    </table>
    <img id=loadImg>
    </form>
     
  2. OUYANG

    OUYANG New Member

    注册:
    2005-09-06
    帖子:
    3,025
    赞:
    5
    好的!收了!

    TKS
     
  3. 总代

    总代 New Member

    注册:
    2005-11-10
    帖子:
    4,145
    赞:
    89
    好东西,不错