• 如何用JavaScript在浏览器端获取图片的原始尺寸大小?


    var img = $("#img_id"); // Get my img elem
    var pic_real_width, pic_real_height;
    $("<img/>") // Make in memory copy of image to avoid css issues
        .attr("src", $(img).attr("src"))
        .load(function() {
            pic_real_width = this.width;   // Note: $(this).width() will not
            pic_real_height = this.height; // work for in memory images.
        });
    

      从技术上,我们可以轻松的用文本的最大宽度限制图片,让它们都保持一个宽度,而不按文本的宽度时,我们就需要每个图片的自己的尺寸。我们可以在服务端编辑时声明图片的原始尺寸。而一种更灵活的方式是通过在页面上放一段js来动态的获取图片的原始大小尺寸,动态改变图片的显示大小。这样即能兼容老的也文本最大宽度的方式,还可以在需要的时候让图片呈现出其原始的大小。

         Webkit浏览器(谷歌浏览器等)是在图片的loaded事件之后才能获取高度和宽度值。所以,你不能使用timeout函数延时等待,最好的方法是使用图片的onload事件。

    为了避免CSS对图片大小尺寸的影响,上面的代码将图片拷贝到内存中进行计算。

    如果你的页面是老式页面,你可以按需把这段代码嵌入页面底部,它不需要你修改原有页面。

  • 相关阅读:
    Struts2结合Ajax实现登录
    Java读取Properties文件
    职责链模式
    javaScript初学者易错点
    2019 DevOps 必备面试题——DevOps 理念篇
    如何成为一名优秀的敏捷团队负责人
    为什么企业敏捷团队会失败
    伪装的敏捷,我好累
    CODING 告诉你如何建立一个 Scrum 团队
    十倍程序员的传说
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4147000.html
Copyright © 2020-2023  润新知