Getting original image for cropping, ignoring the width attribute?

Question

My user can upload really big images, and for cropping and display purposes i'm adding width attribute so it will fit well in the browser window. Real image size can be - say 1920 x 1080 px.

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

In order to calculate real selection box dimension (if the x coordinate is 20px then would be 60px in the original full hd picture) i need to get the full image size before apply the width attribute.

The problem is that this will return 640 as value, taking into account the width attribute:

// 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);
    });
});

Please don't flag this as duplicate since what i'm asking is completly different from simple image width/height retrival (which works, actually).

EDIT: Chris G. solution seems not working:

$(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
    });
});

Console output:

http://localhost/DigitLifeAdminExtension/images/pillars-of-creation.jpg
<img width="0">

Chris G. · Accepted Answer · 2011-12-14T22:59:12.637

3

Get the width/height of the image itself, not the div it is contained within.

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

edited Dec 14 '11 at 22:59

answered Dec 14 '11 at 22:19

Chris G.

3,963
2
21
40

New object for getting width only, can this be overkill? – gremo Dec 14 '11 at 22:23
Most likely not. Test it with Firebug and benchmark to decide for yourself. Avoid over-engineering. – Chris G. Dec 14 '11 at 22:30
I updated my answer. You'll want it to wait until the document is finished loading. – Chris G. Dec 14 '11 at 22:36
What about webkit browsers like safari and cached images, look: http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome – gremo Dec 14 '11 at 22:41
@Gremo you have to read the image width and height inside the onload handler. Like so: var img = new Image($(this).src); img.onload = function() { alert(img.width }; This has nothing to do with the document readiness. – zatatatata Dec 14 '11 at 22:46
@VahurRoosimaa i'm always getting 0 (zero). – gremo Dec 14 '11 at 22:54
@Gremo Can't use the Image() prototype like that. Easy to forget. – Chris G. Dec 14 '11 at 22:59
@ChrisG. thanks, now it's working fine. But i didn't tested in webkit chrome with cached images. Will it work? – gremo Dec 14 '11 at 23:09

score 0 · Answer 2 · answered Dec 14 '11 at 22:31

You can remove the attributes, get the width and put the attributes in place again:

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

$img.width(oldWidth);

But I think Chris G.'s answer works well too, just making sure it will be loaded when you try to get the width:

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

score 0 · Answer 3 · answered Dec 14 '11 at 22:37

0

Works in most up-to-date browsers and IE9.

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

answered Dec 14 '11 at 22:37

James

20,957
5
26
41

score 0 · Answer 4 · answered Dec 14 '11 at 22:55

The working solution would be:

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

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

Getting original image for cropping, ignoring the width attribute?

4 Answers4