网页中的图片的处理方法与代码

1 掉链接的图片处理
<img src="no.jpg" onerror="this.src='images/new.gif'">

2 自动缩小大图
经常看到一些图片很大,上传后显示会撑满屏幕。下面的例子通过检测图片的宽度,如果该图片的宽度大于“屏幕宽度-350”,

则让该图就显示“屏幕宽度-350”这么大小。

原图
<img src="jsimg/wallpaper.jpg">
设定大小的图
  <img src="jsimg/wallpaper.jpg" onload="javascript:if(this.width>screen.width-350) this.width=screen.width-350">

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

原图,会自动缩小
  <img src="jsimg/wallpaper.jpg">
  设定不缩小
  <img src="jsimg/wallpaper.jpg" galleryimg="no">

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


代码如下:

 <a href="#" onFocus=this.blur()> <img src="jsimg/marylin.jpg" border=0> </a>

5 可控制上传图片的大小

处理上传图片大小的JS


代码如下:

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

(0)

相关推荐

  • 网页中的图片的处理方法与代码

    1 掉链接的图片处理 <img src="no.jpg" onerror="this.src='images/new.gif'"> 2 自动缩小大图 经常看到一些图片很大,上传后显示会撑满屏幕.下面的例子通过检测图片的宽度,如果该图片的宽度大于"屏幕宽度-350", 则让该图就显示"屏幕宽度-350"这么大小. 原图 <img src="jsimg/wallpaper.jpg"> 设

  • python使用正则表达式分析网页中的图片并进行替换的方法

    本文实例讲述了python使用正则表达式分析网页中的图片并进行替换的方法.分享给大家供大家参考.具体分析如下: 这段代码分析网页中的所有图片表单<img>,分析后为其前后添加相应的修饰标签,并添加到图片的超级链接. 复制代码 代码如下: result = value.replace("[ page ]","").replace('  ',u' ') p=re.compile(r'''(<img\b[^<>]*?\bsrc[\s\t\r\

  • 网页中的图片查看器viewjs使用方法

    需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyuanchen/viewerjs 具体使用方法请参照官网说明. 下面做2个简单的示例: 1.示例一:单一图片 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"

  • IE中直接运行显示当前网页中的图片 推荐

    jb51修正版使用方法直接在已打开网页的IE地址栏中输入即可1.显示网页中的所有图片 复制代码 代码如下: javascript:s='';for (i=0;i<document.images.length;i++){s+='<img src='+document.images[i].src+'><br>'};if(s!=''){document.write('<center>'+s+'</center>');void(document.close()

  • C#通过正则表达式实现提取网页中的图片

    目前在做项目中有处理图片的部分,参考了一下网上案例,自己写了一个获取内容中的图片地址的方法. 一般来说一个 HTML 文档有很多标签,比如"<html>"."<body>"."<table>"等,想把文档中的 img 标签提取出来并不是一件容易的事.由于 img 标签样式变化多端,使提取的时候用程序寻找并不容易.于是想要寻找它们就必须写一个非常健全的正则表达式,不然有可能会找得不全,或者找出来的不是正确的 im

  • 网页中右键功能的实现方法之contextMenu的使用

    本文介绍一种网页中实现右键功能的方案–contextMenu. 1.下载 下载地址 https://github.com/swisnl/jQuery-contextMenu 下载得到压缩文件jQuery-contextMenu-master.zip 解压后,使用dist目录下css.js. 2.使用方法 使用步骤: (1) 引用css.js. (2) html.js代码. 简单例子如下: 代码test.html: <!DOCTYPE html> <html lang="en&q

  • javascript实现在网页中运行本地程序的方法

    本文实例讲述了javascript实现在网页中运行本地程序的方法.分享给大家供大家参考,具体如下: <input onclick="exec('notepad.exe')" value="执行noteppad.exe" type="button"> <input onclick="exec('cmd.exe')" value="执行cmd.exe" type="button&qu

  • C#操作数据库中存取图片文件的方法

    本文实例讲述了C#操作数据库中存取图片文件的方法.分享给大家供大家参考.具体如下: private string sqlconnstr = "Data Source=.;Database=db_test;User id=sa;PWD=123456"; /*功能:把一种图片插入到数据库中 *返回值:无 */ void InsertImageToDB() { //将需要存储的图片读取为数据流 FileStream fs = new FileStream(@"D:/Bear.jpg

  • django之静态文件 django 2.0 在网页中显示图片的例子

    小白,有错的地方,希望大家指正~ 使用的是django2.0 python3.6 1.首先,要在settings.py中设置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR,'media/') 2.url.py中,在加入 from django.conf.urls.static import static from . import settings urlpatterns = [ path('admin/', admin.sit

  • Python读取excel中的图片完美解决方法

    excel中有图片是很常见的,但是通过python读取excel中的图片没有很好的解决办法. 网上找了一种很聪明的方法,原理是这样的: 1.将待读取的excel文件后缀名改成zip,变成压缩文件. 2.再解压这个文件. 3.在解压后的文件夹中,就有excel中的图片. 4.这样读excel中的图片,就变成了读文件夹中的图片了,和普通文件一样,可以做各种处理. 解压后的压缩包如下: python脚本如下: ''' File Name: readexcelimg Author: tim Date:

随机推荐