十一月
30

【JavaScript温故知新】获取远程图片的尺寸大小

请参见最新的《javascript 图片预加载

=========================================

头题】这又是一篇探讨文。即为我学习中总结,不是教程,不是技术样板,请你抱着怀疑的、挑错的态度来阅读此文。

我早在暑假初的时候写过一篇《我是如何处理文章中图片的》,其实那篇文章中的代码主要是为了限制图片的大小,因为IE对图片的按比例处理支持很不好。比如我对图片限制“max-width:600px”,火狐、chrome等浏览器会按比例缩小图片,而IE这方面较差,往往不是按比例缩小,会导致图片变形。而且IE6不支持max-width。

所以为了兼容性,才要去使用JS来处理。现在来看早期的这篇文章,发觉代码中存在很多不合理之处。所以我重写了获取图片大小的方法。

/*!
 @FileOverview 获取图片尺寸
 @Author liuqiqi || imqiqiboy@g mail.com || http://www.qiqiboy.com
 @date 2010/11/29
 @param cfg 配置项,cfg.img为一个图片对象的引用或者图片的url,cfg.oncomplete为获取尺寸后的后续操作,即回调函数。具体应用请看例子
 @return none
*/
function getImageSize(cfg){
    var img=document.createElement('img'),
        callback=cfg.oncomplete;
    img.src = typeof cfg.img == 'string'?cfg.img:cfg.img.src;
    img.setAttribute('style','position:absolute;visibility:hidden;');
    document.body.appendChild(img);
    img.onload=img.onerror=img.onreadystatechange=function(){
        if(img&&img.readyState&&img.readyState!='loaded'&&img.readyState!='complete')
            return;
        img.onload = img.onreadystatechange = img.onerror = null;
        callback.call({"width":img.width,"height":img.height},null);
        img.parentNode.removeChild(img);
        img=null;
    };
}
 
/* 例子1,获取远程图片的尺寸 */
getImageSize({
        img:'http://www.qiqiboy.com/wp-content/uploads/2010/11/bing.png',
        oncomplete:function(){
            alert('宽度:'+this.width+','+'高度:'+this.height)
        }
    });
 
/* 例子2,限制class为myimg的图片的大小为600以内 */
var imgs=getElementsByClassName('myimg','img',document),//getElementsByClassName为一个自写的结点获取方法,不是JS原生支持的哦
    maxWidth=600;//最大宽度为600
for(var i=0;i<imgs.length;i++){
    getImageSize({
        img:imgs[i],
        oncomplete:function(){
            if(this.width>maxWidth){
                imgs[i].height=Math.round(this.height/this.width*maxWidth);
                imgs[i].width=maxWidth;
            }
        }
    });
}

以上代码中也包含了两个具体应用的例子。函数参数cfg是个对象,其中oncomplete为尺寸获取之后的响应函数,图片的尺寸保存在响应函数的调用对象中,使用this.width、this.height就可以分别取到图片的宽度和高度。

注:如果你想要限制图片尺寸,请参考最新的文章《终极完美版javascript获取并限制调整图片尺寸

AlvearIceCave_ZH-CN1076291981

本文标签: , , ,

分享

本文短网址: http://qiqi.boy.im/9w

这篇文章已经有 35 条评论

Comments (34) Trackbacks (1)
You can leave a response or Trackback this entry .
  1. zwwooooo -#1

    沙发!

  2. zwwooooo -#2

    探讨的话不行啊,没学过js,我只能记点方法然后变通。

    • QiQiBoY --#1

      @zwwooooo
      哈。。。文章第一句话是客套话,相当于“免责声明”,类似于网上下载的盗版电影,开头都有“本片源来自网络,仅供学习”。。。因为我不能保证我文章中分享的代码是完全正确,我只能尽自己最大努力的测试,避免错误。如果别人使用我的代码了,出问题了,我不负责、。 :grin:

    • zwwooooo --#2

      @QiQiBoY
      :grin: 共享的东东谁用谁负责。。。

    • QiQiBoY --#3

      @zwwooooo
      哈。。。。。。这些代码是我自己写的,既然与大家分享了,我会保证最大程度上的正确无误。。要是真的出问题了,我也是不负责赔偿损失滴。。 :oops:

  3. Google不爱我 -#3

    表示唯一能说的也就是最后的那张图片应该是从Bing摘下来的……

  4. 阿修 -#4

    这个貌似可以解决我上次说的图片页面高度问题~~~有时间试试

  5. 夏影残雪 -#5

    表示太技术了……

    &还是觉得你blog的loading有问题。

  6. 小邪 -#6

    唔,感觉IE6还是很不给力,我有在牛奶蛋上面设置图片最小宽度为800px ~
    所以显示的时候只指定了width为800px ~
    结果png图片虽然是被IE6按比例缩放了,但是这个缩放的效果,。。。浆糊一样。。。。

  7. yun77op -#7

    对IE6这么在意的话,推荐使用IE7.js

  8. mice -#8

    限制图片大小 一直是我的痛…
    我想给我那边评论也加个外链图片..可是如果图太大了..就会撑破评论框 很难看..
    我想按比例缩放..但是我每层嵌套的大小又不同.还要判断每层多宽..还没想到什么好的解决办法..

    • QiQiBoY --#1

      @mice
      使用百分比单位,比如max-width:99%

    • mice --#2

      @QiQiBoY
      那IE6用户 怎么解决..

    • QiQiBoY --#3

      @mice
      那可以使用expression试试。。
      img{
      _width:expression(this.width > 200 ? “200px” : “auto”); /* IE6 hack */
      }
      上面代码是限制最大宽度200,你说的效果需要百分比,不知道expression(this.width > 99% ? “99%” : this.width) 行不行。。
      不行的话再试试
      expression(this.width > this.parentNode.clientWidth ? “99%” : “auto”)
      this.parentNode.clientWidth是包含图片的父级容器的可视宽度,如果多层,就相应的晚上回溯,如this.parentNode.parentNode.clientWidth。。。
      上面代码我没测试,手头没IE6,有兴趣你测试看看吧。。 :grin:

    • mice --#4

      @QiQiBoY
      下个星期 我就研究这个,代码 先收留了 嘿嘿..
      我那里想加个放图功能好久了.. :twisted:

  9. 软件盒子 -#9

    我想知道怎么用WP自带的图片插入工具自动按按比例缩放

  10. bronze casting -#10

    图片的感觉很不错哦,赞一个

  11. Firm -#11

    感叹下,一张图片也可以这么折腾。。

  12. zuiTT -#12

    进来之后无从下手了!!

  13. 智森 -#13

    强是很强,但是有点复杂

  14. 中文软件资讯站 -#14

    我想请教个问题 大大能不能帮我说下 就是我站用的是dedecms 我想给发布的图加个边框 可是我不知道怎么加上去 不知道从何处下手啊 我是菜鸟中的菜鸟

  15. 菠萝 -#15

    奇奇的博客又有变化!代码更强大了!顶一下!

  16. wmtimes -#16

    这个很有用。

  17. spray gun -#17

    这个功能很不错,学习了。。

  1. 终极完美版javascript获取并限制调整图片尺寸

    [...] 之前我写过一篇《【JavaScript温故知新】获取远程图片的尺寸大小》,文中我提供了获取远程图片尺寸(即图片宽度和高度)的方法。在文末我还附加一段代码,是用来调整图片尺寸的。那段代码并没有什么错误,只是由于我没仔细测试,所以当我现在在我的新主题上应用图片调整功能时,发现了这段代码的的不足之处: [...]

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: