获取在 JavaScript 中加载的图像的宽度

Posted 2023-03-06

【中文标题】获取在 JavaScript 中加载的图像的宽度

【英文标题】：Get width of image loaded in JavaScript

【发布时间】：2012-11-26 03:52:24

【问题描述】：

我在我的 javascript 代码中附加了一个图像，但想要获得正确的宽度和高度。这可能吗？我的代码如下所示：

$('body').append('<img src="path.jpg"    />');

---

我知道如何在加载后获取图像宽度，但我正在加载img 并想直接获取其相应的宽度和高度。有什么建议吗？

【参考方案1】：

加载后可以获取图片的尺寸：

var imageWidth;
var imageHeight;
$('<img>').on('load', function() 
    imageWidth = this.width; 
    imageHeight = this.height; 
    $('body').append($(this));
).attr('src', imageUrl);

【讨论】：

仅在页面加载时有效，当src被Javascript更改时无效，返回undefined

【参考方案2】：

var image = new Image;
image.src = $('img').prop('src');
alert($(image).prop('height'))

【参考方案3】：

html 规范建议为 <img> 指定 height 和 width 作为视觉代理的提示，它混合标记和样式规则来构建一个视觉表示HTML 文档。在 CSS 盒子模型中，图像尺寸是固有的，即它们隐含在二进制 blob 中。这意味着浏览器必须等待 HTTP 响应才能决定图像有多大，从而决定如何布局和定位兄弟姐妹和父母。在 HTML 页面中指定尺寸有助于浏览器快速呈现页面，因为它可以在从服务器下载图像之前分配宽度和高度。

此时应该清楚，在下载之前无法在客户端访问图像宽度。当 Javascript 知道它时，浏览器就已经知道了，而您声明它对于您的要求来说为时已晚。

因此，提示浏览器的唯一选项是在服务器端测量图像。它可以在每个请求的基础上完成（但这会浪费资源），或者可以在第一次上传图像时完成一次（然后从数据库中检索），或者最终可以假设它是恒定的，例如如果它是您的服务将始终增长或缩小到恰好W x H 像素大的个人资料图片（这可能是一个配置参数）。

【讨论】：

谢谢，我担心这就是问题所在。所以剩下的一个选择是将图像预加载到缓存中但使其不可见然后显示它？我想我会在上传图片时给出参数，这似乎比预加载图片更好。

如果您在未加载时使其不可见，则设置尺寸没有意义，因为无论如何浏览器都必须重新布局。唯一的选择是在服务器上测量，但请注意，这不是必需的，也不是常见的做法。如果你真的很想，那没关系，否则就跳过它

谢谢，你会喜欢这样的：***.com/questions/1944280/…。但是我现在要在上传文件时自动为其添加参数

【参考方案4】：

您可以提前加载图像，而不必立即显示。

var img = document.createElement('img');
img.src = 'your_image.jpg';
var imgHeight = img.height,
    imgWidth = img.width;

您现在可以随时调用它以及正确的详细信息。

【讨论】：

您必须等到图像加载后才能获得它的大小。您的代码不适用于加载缓慢的图像。

【参考方案5】：

我决定在 wordpress 中创建一个输出图像尺寸的新函数，以便我可以使用 wordpress 检索结果

function wpsc_the_product_dimensions( $width='', $height='', $product_id='' ) 
    if ( empty( $product_id ) )
        $product_id = get_the_ID();


    $product = get_post( $product_id );

    if ( $product->post_parent > 0 )
        $product_id = $product->post_parent;

    $attached_images = (array)get_posts( array(
                'post_type' => 'attachment',
                'numberposts' => 1,
                'post_status' => null,
                'post_parent' => $product_id,
                'orderby' => 'menu_order',
                'order' => 'ASC'
            ) );


    $post_thumbnail_id = get_post_thumbnail_id( $product_id );

    $image_attributes = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );

    $image_dimensions = 'product-link="'.$image_attributes[0].'" product- product-';

    return $image_dimensions;

并将 image_dimensions 附加到 img 并使用 javascript 进行检索

w = $(this).attr('product-width');
h = $(this).attr('product-height');