網頁圖片處理代碼全集整理

06-26

1，掉鏈級圖片的替代圖片 <img src="no.jpg" onerror="this.src=『images/logo.gif『"> 2，自動縮小大圖　　經常看到一些圖片很大，上傳後顯示會撐滿屏幕下面的例子通過檢測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"> 3，禁止IE6中大尺寸圖片的自動縮小原圖,會自動縮小<br> <img src="jsimg/wallpaper.jpg"> <br> 設定不縮小<br> <img src="jsimg/wallpaper.jpg" galleryimg="no"> 4，去掉用IE6.0瀏覽圖片，當滑鼠放到圖片上時出現快捷工具（列印、郵寄、另存等）方法一： <META HTTP-EQUIV="imagetoolbar" CONTENT="no"> 方法二： <img galleryimg="no"> 定義CSS： <style> img {nobar:expression(this.galleryImg=『no『)} </style> 5，去掉熱點地圖上的區域線框與超鏈接的線框 <a href="#" onFocus=this.blur()><img src="jsimg/marylin.jpg" border=0></a> 6，可控制上傳圖片的大小 <script language="JavaScript"> function orsc() { if(img.readyState!="complete")return false; if(img.offsetWidth!=132&&img.offsetHeight!=99){ alert("您選擇的圖片大小："+img.offsetWidth+"X"+img.offsetHeight+"
"+"請選擇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+"
"+"請選擇132X99大小的圖片") return (false) } } } } </script> <form onSubmit="return mysubmit(this)" name="form" method="post" enctype="multipart/form-data"> <table 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> 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+"
寬:"+img.offsetWidth); } </script> <input type="file" Name="file" id="inp" value="默認值"><br><input onclick="s()" type="button" value="點我一下給出要上傳圖片的大小及長、寬" name="button"> 8，按比例縮小 <script defer> for (var i=0;i<document.images.length;i++){ document.images[i].width_=document.images[i].width*0.5 } </script> <img src="img/wallpaper.jpg"> 9，類似Acdsee看大圖的時的拖動 <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">  </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> 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=".您要上傳的圖片尺寸大於您的剩餘相冊容量,請選擇上傳至"臨時相冊"
"+lErr; } } if(form1.OldAlbum.value=="0"){ if(form1.NewAlbum.value.length==0){ lErr=".請輸入新相冊名稱
"+lErr; } } if(lErr.length>0){ alert("錯誤:
"+lErr); if(lErr.indexOf("請輸入新相冊名稱

")!=-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格式!
請重新選擇!『); 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+="此圖片尺寸過大,圖片尺寸應小於2MB
"; 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("此圖片尺寸過大,圖片尺寸應小於2MB
"); return ; } if(image.src.substr(image.src.length-3,3).toLowerCase()!="jpg"){ image.outerHTML=""; gErr+="此圖片類型不匹配,只能上傳JPG(JPEG)格式文件
"; 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)格式文件
"); 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+="此圖片文件名包含中文或其他不合法字元
文件名只能由『a-z『、『A-Z『、『_『、『-『構成
"; 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("此圖片文件名包含中文或其他不合法字元
文件名只能由『a-z『、『A-Z『、『_『、『-『構成
"); 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+"
圖片大小: "+image.fileSize+"
圖片路徑: "+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+"
圖片大小: "+image.fileSize+"
圖片路徑: "+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 ><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 > <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> 11，不同的ALT <SCRIPT language=JavaScript1.2>  </script> <img src="images/logo.gif" alt="網頁教學網">
推薦閱讀：

※教授媽媽太有才：將12張圖整理貼牆上，孩子5天背完6年所學單詞！
※風水中什麼是過峽　　整理/陳益峰
※今天為大家整理了15款大廚絕密秘方，分享給大家參考
※收集整理的八字---戊土
※詳細整理一份飲食指南，幫助血液病人儘早康復！

TAG:圖片 | 代碼 | 圖片處理 | 整理 | 網頁 | 處理 |