确定图像跨浏览器的原始大小？ [英] Determine original size of image cross browser?

问题描述

是否有一种可靠的，独立于框架的方法来确定客户端调整大小的< img src ='xyz.jpg'> 的物理尺寸？

Is there a reliable, framework independent way of determining the physical dimensions of a <img src='xyz.jpg'> resized on the client side?

推荐答案

您有2个选择：

选项1：

删除宽度和高度属性和读取 offsetWidth 和 offsetHeight

选项2：

创建一个JavaScript Image 对象，设置 src ，并阅读宽度和 height （您甚至不需要添加它到页面执行此操作）。

Create a JavaScript Image object, set the src, and read the width and height (you don't even have to add it to the page to do this).

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload
}

由Pekka编辑：根据评论中的约定，我将函数更改为在图像的'onload'事件上运行。否则，对于大图像， height 和 width 将不会返回任何内容，因为图像尚未加载。

Edit by Pekka: As agreed in the comments, I changed the function to run on the ´onload´ event of the image. Otherwise, with big images, height and width would not return anything because the image was not loaded yet.

这篇关于确定图像跨浏览器的原始大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！