Получение исходного изображения для обрезки, игнорируя атрибут width?

Question

Мой пользователь может загружать действительно большие изображения, и для обрезки и отображения я добавляю атрибут width, чтобы он хорошо помещался в окне браузера.Реальный размер изображения может быть, скажем, 1920 x 1080 px.

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

Чтобы вычислить реальный размер поля выбора (если координата x равна 20px, то висходное полное hd изображение) мне нужно получить полный размер изображения до применения атрибута 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);
    });
});

Пожалуйста, не отмечайте это как дубликат, поскольку то, что я спрашиваю, полностью отличается от простого извлечения ширины / высоты изображения (которое работает, на самом деле).

РЕДАКТИРОВАТЬ : Крис Г. решение не работает:

$(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 width="0">

Answer 1

Получите ширину / высоту самого изображения, а не div, в котором оно содержится.

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

Answer 2

Рабочий раствор будет:

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

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

Answer 3

Работает в большинстве современных браузеров и IE9.

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

Answer 4

Вы можете удалить атрибуты, получить ширину и снова поставить атрибуты на место:

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

$img.width(oldWidth);

Но я думаю, что ответ Криса Г. тоже работает хорошо, просто убедившись, что он будет загружен, когда вы попытаетесь получить ширину:

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