Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting original image for cropping, ignoring the width attribute?
    primarykey
    data
    text
    <p>My user can upload really big images, and for <em>cropping</em> and <em>display</em> purposes i'm adding <code>width</code> attribute so it will fit well in the browser window. Real image size can be - say 1920 x 1080 px.</p> <pre><code>&lt;!-- width added for display purpose --&gt; &lt;img class="croppable" src="images/fhd.jpg" width="640" /&gt; </code></pre> <p>In order to calculate <strong>real selection box dimension</strong> (if the <code>x</code> coordinate is 20px then would be 60px in the original full hd picture) i need to get the full image size <strong>before</strong> apply the <code>width</code> attribute.</p> <p>The <strong>problem</strong> is that this will return 640 as value, taking into account the width attribute:</p> <pre><code>// 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); }); }); </code></pre> <p><strong>Please don't flag this as duplicate since what i'm asking is completly different from simple image width/height retrival (which works, actually).</strong> </p> <p><strong>EDIT</strong>: Chris G. solution seems not working:</p> <pre><code>$(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 }); }); </code></pre> <p>Console output:</p> <pre><code>http://localhost/DigitLifeAdminExtension/images/pillars-of-creation.jpg &lt;img width="0"&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload