`
webcode
  • 浏览: 5976263 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

javascript图片处理函数

JavaScript百度HTML 
阅读更多

<SCRIPT language=JavaScript>
<!--
var proMaxHeight = 150;
var proMaxWidth = 110;

function proDownImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate <= 1){
ImgD.width = image.width*rate;
ImgD.height =image.height*rate;
}
else {
ImgD.width = image.width;
ImgD.height =image.height;
}
}
}
//-->
</SCRIPT>

百度的javascript还好啦。喜欢。所以收录下来。。。

如果懂这个的话，一看就懂了。。。呵呵。。。

不过还是介绍一下用法。。。。。

<img src="http://www.baidu.com/images/logo.gif" />

上面是一般的HTML里面用的插入图片的一段。。。很简单。但是当插入的图片是网友上传的图片，对尺寸/比例不确定的时候。我们需要的就是这个js了。。。这段代码可以根据网友上传的图片，进行比例缩放。这样不会导致很多商品展示都出现的。图片尺寸都固定死了的情况。。。。用法很简单，把上面的这段javascript放到<head></head>之间，然后把<img src="http://www.baidu.com/images/logo.gif" /> 改成<img src="http://www.baidu.com/images/logo.gif" onload=proDownImage(this); />这样。就可以了。意思就是在图片load装载的时候，调用proDownImage函数对this(即图片本身)对象进行设置。。。。就可以了。。。很简单，但很实用。。。

分享到：
| 常用的DOCUMENT.EXECCOMMAND
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    PHP函数库,PHP函数大全,PHP函数实例,PHP函数手册,PHP5函数库实例

    模仿JAVASCRIPT的ESCAPE和UNESCAPE函数的功能 用curl函数读取远程文件 用file_getcontents提交数据 用php生成扭曲，有角度的验证图片（支持中文） 用正则加亮关键字 程序运行过程中直接输出 缩略图带版权信息...

    JavaScript详解(第2版)

    　13.6.7　HTML事件处理函数和JavaScript事件方法　 　13.6.8　onError事件　 　13.7　event对象　 　13.7.1　捕获和冒泡(滴漏和冒泡)　 　13.7.2　事件对象属性　 　13.7.3　使用事件对象属性　 　13.7.4　将事件...

    JavaScript权威指南（第6版）

    21.1 脚本化图片 21.2 脚本化音频和视频 21.3 SVG：可伸缩的矢量图形 21.4 中的图形 第22章 HTML5 API 22.1 地理位置 22.2 历史记录管理 22.3 跨域消息传递 22.4 Web Worker 22.5 类型化数组和ArrayBuffer 22.6 Blob...

    javascript图片自动缩放和垂直居中处理函数

    非常不错的应用代码，方便我们处理一些图片效果

    JavaScript权威指南(第6版)(中文版)

    21.1 脚本化图片 21.2 脚本化音频和视频 21.3 SVG：可伸缩的矢量图形 21.4 中的图形 第22章 HTML5 API 22.1 地理位置 22.2 历史记录管理 22.3 跨域消息传递 22.4 Web Worker 22.5 类型化数组和ArrayBuffer 22.6 Blob...

    JavaScript权威指南(第6版)中文文字版

    21.1 脚本化图片 606 21.2 脚本化音频和视频 608 21.3 svg：可伸缩的矢量图形 615 21.4 [canvas]中的图形 623 第22章 html5 api 658 22.1 地理位置 659 22.2 历史记录管理 662 22.3 跨域消息传递 668 22.4 web ...

    javascript写的windows资源管理器

    因为时间的关系只提供了局部份功能，还有很多代码和函数都没有进行优化，（注释也较少）比如错误处理，浏览器嗅探等。 这里需要说明的是很少用到了innerHTML和innerTEXT两个方法，这是微软提供的专利方法，还没有...

    JavaScript王者归来part.1 总数2

    　13.2.4 事件处理函数的返回值　 　13.2.5 带参数的事件响应及其例子　 　13.2.6 “this”关键字　 　13.3 标准事件模型　 　13.3.1 起泡和捕捉--浏览器的事件传播　 　13.3.2 事件处理函数的注册　 　13.3.3 把...

    程序天下:JavaScript实例自学手册

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    JavaScript完全自学宝典 源代码

    roundcorner.css JavaScript使用CSS模拟图片的圆角效果时使用的CSS样式文件。 第13章（\c13） 示例描述：介绍JavaScript与XML。 13.1.xml 表示书籍信息的XML信息。 13.2.js 跨浏览器兼容的XPath实现。 ...

    《程序天下：JavaScript实例自学手册》光盘源码

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    javascript图像处理—边缘梯度计算函数

    上一篇文章，我们讲解了图像处理中的膨胀和腐蚀函数，这篇文章将做边缘梯度计算函数，感兴趣的朋友可以了解下

    JavaScript权威指南(第六版) 清晰-完整

    21.1 脚本化图片 21.2 脚本化音频和视频 21.3 SVG：可伸缩的矢量图形 21.4 中的图形 第22章 HTML5 API 22.1 地理位置 22.2 历史记录管理 22.3 跨域消息传递 22.4 Web Worker 22.5 类型化数组和ArrayBuffer 22.6 Blob...

    JavaScript权威指南(第6版)

    21.1 脚本化图片 606 21.2 脚本化音频和视频 608 21.3 svg：可伸缩的矢量图形 615 21.4 [canvas]中的图形 623 第22章 html5 api 658 22.1 地理位置 659 22.2 历史记录管理 662 22.3 跨域消息传递 668 22.4 web ...

    JavaScript实例精通

    示例描述：JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示...

    JavaScript权威指南(第6版) 中文版

    21.1 脚本化图片 606 21.2 脚本化音频和视频 608 21.3 svg：可伸缩的矢量图形 615 21.4 [canvas]中的图形 623 第22章 html5 api 658 22.1 地理位置 659 22.2 历史记录管理 662 22.3 跨域消息传递 668 22.4 web ...

    《JavaScript实例精通》[源代码]

    示例描述：JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示...

Magicbox
Global site tag (gtag.js) - Google Analytics