jquery jquery - كيف يمكن الحصول على حجم الصورة(الطول والعرض)باستخدام JavaScript؟




plugins free (20)

هل هناك أي jQuery أو JS APIs أو طرق للحصول على أبعاد صورة على الصفحة؟


Answers

حسناً ، أعتقد أنني قمت بتحسين الكود المصدري لكي أتمكن من تحميل الصورة قبل محاولة معرفة خصائصها ، وإلا فإنها ستعرض "0 * 0" ، لأنه قد تم استدعاء البيان التالي قبل تحميل الملف إلى المتصفح. يتطلب مسج ...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

ببساطة ، يمكنك اختبار مثل هذا.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

يمكنك تطبيق خاصية معالج التحميل عند تحميل الصفحة في js أو jquery كما يلي:

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

أعتقد أن تحديثًا لهذه الإجابات مفيد لأن أحد الردود الأفضل تصويتًا يقترح استخدام clientWidth ، وهو ما أعتقد أنه عفا عليه الزمن الآن.

لقد أجريت بعض التجارب باستخدام HTML5 ، لمعرفة القيم التي يتم إرجاعها بالفعل.

أولاً ، استخدمت برنامجًا باسم Dash للحصول على نظرة عامة على واجهة برمجة تطبيقات image. تنص على أن height width هما الارتفاع / العرض للصورة وأن naturalHeight naturalWidth هما الارتفاع / العرض الأساسي للصورة (وهما HTML5 فقط).

لقد استخدمت صورة لفراشة جميلة ، من ملف يبلغ ارتفاعه 300 وعرضه 400. وهذه Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

ثم استخدمت HTML ، مع CSS مضمّن للطول والعرض.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

النتائج:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

قمت بعد ذلك بتغيير HTML إلى ما يلي:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

بمعنى استخدام سمات الارتفاع والعرض بدلاً من الأنماط المضمنة

النتائج:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

قمت بعد ذلك بتغيير HTML إلى ما يلي:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

أي باستخدام كل من السمات و CSS ، لمعرفة الأسبقية.

النتائج:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

من المهم إزالة إعداد المستعرض المفسر من div الأصلي. لذلك إذا كنت تريد عرض الصورة الحقيقية وارتفاعها يمكنك استخدامها فقط

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

هذا مثال على مشروع TYPO3 واحد من حيث أحتاج إلى الخصائص الحقيقية للصورة لقياسها بالعلاقة الصحيحة.


إذا كنت تستخدم jQuery وكنت تطلب أحجام صور ، فيجب عليك الانتظار حتى يتم تحميلها وإلا ستحصل على أصفار.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

This الإجابة بالضبط ما كنت أبحث عنه (في jQuery):

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

هذه هي طريقي ، آمل أن يكون هذا مفيدا. :)


يمكنك برمجيا الحصول على الصورة والتحقق من الأبعاد باستخدام جافا سكريبت ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

قد يكون هذا مفيدًا إذا لم تكن الصورة جزءًا من الترميز.


طلب نيكي دي Maeyer بعد صورة الخلفية. أنا ببساطة الحصول عليه من المغلق واستبدال "url ()":

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

تستطيع ايضا استخذام:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

جوكيري الجواب:

$height = $('#image_id').height();
$width  = $('#image_id').width();

مع مكتبة jQuery-

استخدم .width() و .height() .

المزيد في عرض jQuery و jQuery heigth .

مثال التعليمات البرمجية-

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>


function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

هذا العمل لمعاينة صورة متعددة وتحميلها. إذا كان عليك أن تختار لكل صورة واحدة تلو الأخرى. ثم نسخ والماضي في جميع وظيفة معاينة الصورة والتحقق من صحة!


لا يمكنك فعل ذلك إلا باستخدام استدعاء لحدث التحميل نظرًا لأن حجم الصورة غير معروف حتى ينتهي التحميل فعليًا. شيء مثل الكود أدناه ...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

قبل الحصول على سمات العنصر ، يجب أن يتم تحميل صفحة المستند:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

clientWidth و clientWidth هي خصائص DOM التي تعرض الحجم الحالي في المستعرض للأبعاد الداخلية لعنصر DOM (باستثناء الهامش والحدود). لذلك في حالة عنصر IMG ، سيحصل هذا على الأبعاد الفعلية للصورة المرئية.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

أيضا (بالإضافة إلى إجابات ريكس وإيان) هناك:

imageElement.naturalHeight

و

imageElement.naturalWidth

هذه توفر ارتفاع وعرض ملف الصورة نفسها (وليس فقط عنصر الصورة).


يمكن استخدام الأسلوب Date.getTime() مع قرص قليلاً:

القيمة التي يتم إرجاعها بواسطة أسلوب getTime هي عدد المللي ثانية منذ 1 يناير 1970 00:00:00 UTC.

قسمة النتيجة على 1000 للحصول على الطابع الزمني لـ UNIX ، إذا لزم الأمر:

(new Date).getTime() / 1000

أسلوب Date.valueOf() مكافئ وظيفياً Date.getTime() ، مما يجعل من الممكن استخدام العوامل الحسابية على كائن التاريخ لتحقيق نتائج متطابقة. في رأيي ، يؤثر هذا الأسلوب على قابلية القراءة.







javascript jquery image jquery-plugins