获取原始图像进行裁剪，忽略宽度属性？

Posted 2023-02-25

【中文标题】获取原始图像进行裁剪，忽略宽度属性？

【英文标题】：Getting original image for cropping, ignoring the width attribute?

【发布时间】：2011-12-14 22:14:06

【问题描述】：

我的用户可以上传非常大的图像，并且出于裁剪 和显示 的目的，我添加了width 属性，以便它可以很好地适应浏览器窗口。实际图像尺寸可以是 - 比如说 1920 x 1080 像素。

<!-- width added for display purpose -->
<img class="croppable" src="images/fhd.jpg"  />

为了计算真实的选择框尺寸（如果x坐标是20px，那么在原始全高清图片中就是60px）我需要在之前获得完整的图像尺寸 应用width 属性。

问题是这将返回 640 作为值，考虑到宽度属性：

// Important: Use load event to avoid problems with webkit browser like safari
// when using cached images
$(window).load(function()
    $('img.croppable').each(function()
        alert(this.width);
    );
);

请不要将此标记为重复，因为我所要求的与简单的图像宽度/高度检索完全不同（实际上有效）。

编辑：Chris G. 解决方案似乎不起作用：

$(window).load(function()
    $('img.croppable').each(function()
        console.log(this.src);
        var original = new Image(this.src);
        console.log(original);
        $("#original_w").text(original.width); // Temp, more images to be added
        $("#original_h").text(original.height); // Temp, more images to be added
    );
);

控制台输出：

http://localhost/DigitLifeAdminExtension/images/pillars-of-creation.jpg
<img >

【参考方案1】：

获取图像本身的宽度/高度，而不是包含在其中的 div。

$(window).load(function()
    $('img.croppable').each(function()
        var img = new Image();
        img.src =  $(this).src;
        alert(img.width);
    );
);

【讨论】：

只获取宽度的新对象，这会不会是矫枉过正？

很可能不是。用 Firebug 和基准测试它来决定自己。避免过度设计。

我更新了我的答案。您会希望它等到文档完成加载。

像 safari 和缓存图片这样的 webkit 浏览器呢，看：***.com/questions/318630/…

@Gremo 您必须在 onload 处理程序中读取图像的宽度和高度。像这样： var img = new Image($(this).src); img.onload = function() alert(img.width ; 这与文档准备情况无关。

【参考方案2】：

您可以删除属性，获取宽度并重新放置属性：

var $img = $(img);
var oldWidth = $img.attr("width");
var imgWidth = $img.removeAttr("width").width();

$img.width(oldWidth);

但我认为 Chris G. 的答案也很有效，只要确保在您尝试获取宽度时它会被加载：

img.onload = function() 
    if (!img.complete) return; // IMG not loaded
    width = img.width;
   imgManipulationGoesHere();

【参考方案3】：

适用于大多数最新的浏览器和 IE9。

$(window).load(function()
    $('img.croppable').each(function()
        alert(this.naturalHeight);
    );
);

【参考方案4】：

可行的解决方案是：

$(function()
    $('img.croppable').each(function () 

        var original = new Image(this.src);
        original.onload = function () 
            alert(original.src + ': ' + original.width + 'x' +original.height);
        ;
    );
);