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

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

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

2，自动缩小大图

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

原图<br>

设定大小的图<br>

<img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350)this.width=screen.width-350">

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

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

原图,会自动缩小<br>

设定不缩小<br>

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

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

方法一：

<METAHTTP-EQUIV="imagetoolbar"CONTENT="no">

方法二：

<imggalleryimg="no">

定义CSS：

<style>

img{nobar:expression(this.galleryImg='no')}

</style>

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

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

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

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>

<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="">

</td>

</tr>

</table>

</form>

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

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

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>

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

8,按比例缩小

for (var i=0;i<document.images.length;i++){

document.images[i].width=document.images[i].width*0.5

}

</script>

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

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

<html>

<head>

<title>Untitled Document</title>

<!--

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>

</html>

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

10,选择图片产生缩略图，最多10个

<html>

<head>

<title>Upload Image</title>

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+"\\\" 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\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("此图片尺寸过大,图片尺寸应小于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+"\\\" 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 >

<TABLE align=center bgColor=#cccccc border=0

borderColorDark=#cccccc borderColorLight=#000000

cellPadding=5 cellSpacing=1 height=367

width="500">

<TBODY>

<TD align=left bgColor=#ffffff colSpan=2

height=269 id=upid vAlign=top> <TABLE cellPadding=3 cellSpacing=1 width="100%">

<TBODY>

<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>

<TD align=middle bgColor=#ebebeb colSpan=2

height=24> <DIV align=left>将图片上传至已有相册

<SELECT id=OldAlbum

name=OldAlbum onchange=AlbumChange(this.value);>

<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>

<TD align=middle bgColor=#ebebeb colSpan=2

height=24> <DIV align=center><FONT size=2>

<INPUT id=upcount name=upcount type=hidden

value=1>

</FONT></DIV></TD>

</TR>

</TBODY>

</TABLE>

</form>

</body>

</html>

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

11,不同的ALT

<!--

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>

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