Image对象和按比例缩放图片

Image对象会在页面每加载一个<img>标签的时候创建一次（类似实例化对象）；然后我们就可以根据这个image对象去获取这个图片的属性值，例如：宽度（width）、高度（height）、地址（src）。同时我们需要理解的一点是这个image对象是HTML DOM中的对象（浏览器接点树上的对象），在某些地方也会称这些对象为宿主对象。

使用Image对象创建图片通常用来实现图片预加载功能。

看下面这个例子：

<script type=”text/javascript”>
         Function loadImg(url){
         Var imgs = new Image();
         Imgs.src = url;
         Imgs.onload = function(){
                   Document.body.appendChild(imgs);

         }
}
</script>

<input type=”button” onclick=”javascript:loadImg(‘a.jpg’)” value=”加载图片” />

把上面这段脚本在每个浏览器中测试中发现第一次图片加载的时候都没有问题。如果重复点击按钮加载图片，就会发现小于等于IE8中的浏览器第二次点击的时候就不能够加载图片了。

到底是什么问题？

然后我把上面的代码修改如下：

<script type=”text/javascript”>
         Function loadImg(url){
         Var imgs = new Image();
         Imgs.onload = function(){
                   Document.body.appendChild(imgs);
         }
         Imgs.src = url;
}
</script>

也就是先创建这个图片节点，然后再为这个节点添加属性内容。我们仔细想想就会发现这样是正确的方法。只有这个页面中存在这个节点的情况下我们才能够对这个节点进行操作（添加、删除、修改）。但是我们怎么解释第一种情况的发生呢？

我个人认为是浏览器在处理这个问题的时候是异步进行的，也就是说在onload里面的事件触发的时候，像火狐，谷歌这样的浏览器同时也就为这个元素节点赋值了。

关于Image对象的讲解参考了http://www.cnblogs.com/carekee/articles/1917612.html的这篇文章。

按比例缩放显示图片：

我们为了节省效率的对图片下载运用预加载之后就要关注图片如何在我们的网站上面显示的问题。试想我们要做一个能够浏览蓝查看上传相册的小功能。但是各种各样的用户可能会上传大小不一尺寸岑参不齐的图片，有些图片可能完全超出了我们浏览器最大化时候的尺寸，如果不做任何操作就直接让用户浏览可想这个体验是多么让人难以接受，为了让用户浏览图片的时候能有良好的体验我们这时候可能就会对这些图片进行缩放处理了。

大家可能都玩过QQ空间，即使没玩过大家应该也会看到过别人QQ空间中的相片。QQ空间也把图片缩放然后在显示到一个指定的区域中的。我们要做的就是给定一个宽高一定的区域，然后缩放图片，让图片优美的显示在这个区域块中间！好了废话不多说，直接看如下的代码：

      

 var nok = {};
        nok.imgReset = function (opt) {
            var config = this.extend({}, opt);
            this.elm = config.elem; //需要重置的图片元素ID值
            this.elmwid = config.width;
            this.elmhei = config.height;
            var scale = this.elmwid / this.elmhei; //用户需要的比例
            var relsieze = {};
            var imgsrc = document.getElementById(this.elm).getAttribute("src");
            var imgObj = new Image();
            imgObj.src = imgsrc;
            var rw = imgObj.width;
            var rh = imgObj.height;
            relsieze.s = imgObj.width / imgObj.height; //图片的实际比例
            if (relsieze.s >= scale) {//判断比例大小进行设置
                if (rw >= this.elmwid) {
                    relsieze.w = this.elmwid;
                    relsieze.h = this.elmwid * rh / rw;
                }
                else {
                    relsieze.w = rw;
                    relsieze.h = rh;
                }
            }
            else {
                if (rh >= this.elemhei) {
                    relsieze.h = rh;
                    relsieze.w = rh * this.elmwid / this.elmhei;
                }
                else {
                    relsieze.h = rh;
                    relsieze.w = rw;
                }
            }
            document.getElementById(this.elm).style.width = relsieze.w + 'px';
            document.getElementById(this.elm).style.height = relsieze.h + 'px';
        };
        nok.extend = function (des, src) {
            for (var k in src) {
                des[k] = src[k];
            }
            return des;
        }

方法函数写好之后我们就可以如下方法去调用：

window.onload = function () {
    var opt = {
        elem: "img", //指定的用户ID
        width: "800", //指定的区域宽度
        height: "600" //指定的区域高度
};

但是通常我们需要处理显示的图片不止一个，所以我们可以通过设置元素的class属性去处理所有需要处理的图片。