网页图片处理代码全集整理

2022-07-15 80酷酷网 80kuku.com

　　网页

1，掉链级图片的替代图片

[Ctrl+A 全选,提示:你可修改代码后运行]

　　2，自动缩小大图

　　经常看到一些图片很大，上传后显示会撑满屏幕下面的例子通过检测if(this.width>screen.width-350)then(this.width=screen.width-350)如果该图片的宽度大于“屏幕宽度-350”，则让该图就显示“屏幕宽度-350”这么大小。

[Ctrl+A 全选,提示:你可修改代码后运行]

　　3，禁止IE6中大尺寸图片的自动缩小

[Ctrl+A 全选,提示:你可修改代码后运行]

4，去掉用IE6.0浏览图片，当鼠标放到图片上时出现快捷工具（打印、邮寄、另存等）

方法一：
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二：
<img galleryimg="no">
定义CSS：
<style>
img {nobar:expression(this.galleryImg='no')}
</style>

5，去掉热点地图上的区域线框与超链接的线框

[Ctrl+A 全选,提示:你可修改代码后运行]

6,可控制上传图片的大小

[Ctrl+A 全选,提示:你可修改代码后运行]

7,检测一个图片的长宽尺寸

[Ctrl+A 全选,提示:你可修改代码后运行]

8,按比例缩小

[Ctrl+A 全选,提示:你可修改代码后运行]

9,类似Acdsee看大图的时的拖动

[Ctrl+A 全选,提示:你可修改代码后运行]

10,选择图片产生缩略图，最多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("请输入新相册名称\n\n")!=-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+"\\\"   value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");        eval("form1.file"+gCurInputIndex+".fireEvent(\"onChange\")");        return false;    }         function handleGoodImage() {        imgsrc='<img src="'+gCurImageSrc+'"  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+="此图片尺寸过大,图片尺寸应小于2MB\n";          eval("form1.file"+Index+".outerHTML=\"<input type=\\\"file\\\" name=\\\"file"+Index+"\\\"   value=\\\"\\\" onChange=\\\"FileChange(this);\\\">\"");          eval("form1.file"+Index+".fireEvent(\"onChange\")");          alert("此图片尺寸过大,图片尺寸应小于2MB\n");          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+"\\\"   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+"\\\"   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)+'"  ><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);                                  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                                  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>

[Ctrl+A 全选,提示:你可修改代码后运行]

11,不同的ALT

<SCRIPT language=JavaScript1.2></script><img src="http://www.webjx.com/htmldata/2005-04-02/http://www.webjx.com/htmldata/2005-04-02/images/logo.gif" alt="网页教学网">

[Ctrl+A 全选,提示:你可修改代码后运行]