首页 > 五花八门 > 代码收藏：js客户端缩略图

代码收藏：js客户端缩略图

2010年2月20日
阅读评论 发表评论

js客户端缩略图函数说明：
参数：imgD图片对象，width_s缩略图的宽，height_s缩略图的高
使用方法：
在html的img标签中加入onLoad事件调用DrawImage()方法。

实例如下：

<img src="http://www.phpiask.com/logo.gif" 
onLoad="DrawImage(this,100,90);" alt="PHP 技术"/>

配合jquery的选择器使用效果更好哦，不过这里我就不说了，时间紧迫啊……

具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

function DrawImage(ImgD, width_s, height_s) {
    /*var width_s=139;缺省的宽
     var height_s=104;缺省的高
  */
    var image = new Image();
    image.src = ImgD.src;
    if (image.width > 0 && image.height > 0) {
        flag = true;
        if (image.width / image.height >= width_s / height_s) {
            if (image.width > width_s) {
                ImgD.width = width_s;
                ImgD.height = (image.height * width_s) / image.width;
            } else {
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        }
        else {
            if (image.height > height_s) {
                ImgD.height = height_s;
                ImgD.width = (image.width * height_s) / image.height;
            } else {
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        }
    }
    else {
        ImgD.src = "";
        ImgD.alt = ""
    }
}

这段代码能够轻易而举的搞定图片在客户端展示的缩放大小，但是也有潜在的问题哦，例如你一个页面展示了100多个1M大小的照片展示的速度就很难保证了……所以图片的缩略图战地还是建议在服务器端利用PHP生成一个。

战地音乐 五花八门 ,

没有相关文章

  1. 本文目前尚无任何评论.