45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:处理图片的技巧大全

处理图片的技巧大全

2016-09-07 02:27:17 来源:www.45fan.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浏览图片,当鼠标放到图片上时出现快捷工具(打英邮寄、另存等

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


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



<TEXTAREA class=editbox style="WIDTH: 443px; HEIGHT: 54px" name=htmlArea rows=3 cols=70>&lt;a href="#" onFocus=this.blur()&gt;&lt;img src="jsimg/marylin.jpg" border=0&gt;&lt;/a&gt; </TEXTAREA>
[Ctrl+A 全选,提示:你可修改代码后运行]

 

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


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

 

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

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

 

8,按比例缩小

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

 


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

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

 


10,选择图片产生缩略图,最多10个
<TEXTAREA class=editbox name=htmlArea rows=8 cols=70>&lt;html&gt; &lt;head&gt; &lt;title&gt;Upload Image&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;SCRIPT language=Javascript&gt; 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)&gt;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&gt;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=/"&lt;input type=///"file///" name=///"file"+gCurInputIndex+"///" style=///"width:275///" value=///"///" onChange=///"FileChange(this);///"&gt;/""); eval("form1.file"+gCurInputIndex+".fireEvent(/"onChange/")"); return false; } function handleGoodImage() { imgsrc='&lt;img src="'+gCurImageSrc+'" onload="DrawImage(this,'+gCurInputIndex+'); " width="0" height="0"&gt;'; 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&gt;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')&gt;-1) &amp;&amp; (navigator.appVersion.indexOf('MSIE')&gt;-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&gt;2048000){ image.outerHTML=""; gErr+="此图片尺寸过大,图片尺寸应小于2MB/n"; eval("form1.file"+Index+".outerHTML=/"&lt;input type=///"file///" name=///"file"+Index+"///" style=///"width:275///" value=///"///" onChange=///"FileChange(this);///"&gt;/""); 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=/"&lt;input type=///"file///" name=///"file"+Index+"///" style=///"width:275///" value=///"///" onChange=///"FileChange(this);///"&gt;/""); 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=/"&lt;input type=///"file///" name=///"file"+Index+"///" style=///"width:275///" value=///"///" onChange=///"FileChange(this);///"&gt;/""); eval("form1.file"+Index+".fireEvent(/"onChange/")"); alert("此图片文件名包含中文或其他不合法字符/n文件名只能由'a-z'、'A-Z'、'_'、'-'构成/n"); return ; } if(gErr.length&gt;0){ return; } if(image.width&gt;0 &amp;&amp; image.height&gt;0){ flag=true; if(image.width/image.height&gt;= 120/80){ if(image.width&gt;120){ ImgD.width=120; ImgD.height=(image.height*120)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt="图片大小(宽*高): "+image.width+"&#215;"+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&gt;80){ ImgD.height=80; ImgD.width=(image.width*80)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt="图片大小(宽*高): "+image.width+"&#215;"+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+='&lt;table width="100%" &gt;&lt;tr valign="middle" &gt;&lt;td align="center" id="tdimg" height="" width="120" &gt;&lt;/td&gt;&lt;td id="tdfile" &gt;文件'+(parseInt(Index)+1)+':&lt;input onpropertychange="FileChange(this);" type="file" name="file'+(parseInt(Index)+1)+'" style="width:275" &gt;&lt;input id="width'+(parseInt(Index)+1)+'" name="width'+(parseInt(Index)+1)+'" type="hidden" value=""&gt;&lt;input id="height'+(parseInt(Index)+1)+'" name="height'+(parseInt(Index)+1)+'" type="hidden" value=""&gt;&lt;input name="PicUpdateDate'+(parseInt(Index)+1)+'" type="hidden" id="PicUpdateDate'+(parseInt(Index)+1)+'"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'; window.upid.insertAdjacentHTML("beforeEnd",str+'&lt;br&gt;'); } 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 &lt; String.length; i ++ ) { c = String.charAt( i ); if (Letters.indexOf( c ) &lt; 0) return false; } return true; } &lt;/SCRIPT&gt; &lt;/head&gt; &lt;body &gt; &lt;form name="form1" method="post" action=""&gt; &lt;TABLE align=center bgColor=#cccccc border=0 borderColorDark=#cccccc borderColorLight=#000000 cellPadding=5 cellSpacing=1 height=367 width="500"&gt; &lt;TBODY&gt; &lt;TR vAlign=center&gt; &lt;TD align=left bgColor=#ffffff colSpan=2 height=269 id=upid vAlign=top&gt; &lt;TABLE cellPadding=3 cellSpacing=1 width="100%"&gt; &lt;TBODY&gt; &lt;TR vAlign=center&gt; &lt;TD align=middle bgColor=#ffffff id=tdimg width=120&gt;&lt;/TD&gt; &lt;TD bgColor=#ffffff id=tdfile&gt;文件1: &lt;INPUT name=file1 onpropertychange=FileChange(this); style="WIDTH: 275px" type=file&gt; &lt;INPUT id=width1 name=width1 type=hidden&gt; &lt;INPUT id=height1 name=height1 type=hidden&gt; &lt;INPUT id=PicUpdateDate1 name=PicUpdateDate1 type=hidden&gt;&lt;/TD&gt; &lt;/TR&gt; &lt;/TBODY&gt; &lt;/TABLE&gt;&lt;/TD&gt; &lt;/TR&gt; &lt;TR bgColor=#eeeeee vAlign=center&gt; &lt;TD align=middle bgColor=#ebebeb colSpan=2 height=24&gt; &lt;DIV align=left&gt;将图片上传至已有相册 &lt;SELECT id=OldAlbum name=OldAlbum onchange=AlbumChange(this.value);&gt; &lt;OPTION value=0&gt;&lt;新建相册&gt;&lt;/OPTION&gt; &lt;OPTION selected value=365&gt;临时相册&lt;/OPTION&gt; &lt;/SELECT&gt; &lt;INPUT id=TempAlbum name=TempAlbum type=hidden value=365&gt; &lt;SPAN id=sNewAlbum style="DISPLAY: none"&gt;或新建相册 &lt;INPUT id=NewAlbum maxLength=50 name=NewAlbum onfocus=""&gt; &lt;/SPAN&gt;&lt;/DIV&gt;&lt;/TD&gt; &lt;/TR&gt; &lt;TR bgColor=#eeeeee vAlign=center&gt; &lt;TD align=middle bgColor=#ebebeb colSpan=2 height=24&gt; &lt;DIV align=center&gt;&lt;FONT size=2&gt; &lt;INPUT class=bt name=Submit onclick=validate(); type=button value="&#183; 上传已选图片 &#183;"&gt; &lt;INPUT id=upcount name=upcount type=hidden value=1&gt; &lt;INPUT id=from name=from type=hidden&gt; &lt;/FONT&gt;&lt;/DIV&gt;&lt;/TD&gt; &lt;/TR&gt; &lt;/TBODY&gt; &lt;/TABLE&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </TEXTAREA>
[Ctrl+A 全选,提示:你可修改代码后运行]

 

11,不同的ALT

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

本文地址:http://www.45fan.com/dnjc/73411.html
Tags: 处理 图片 技巧
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部