javascript - jquery plugins free download




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

أعتقد أن تحديثًا لهذه الإجابات مفيد لأن أحد الردود الأفضل تصويتًا يقترح استخدام 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

https://code.i-harness.com

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


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

imageElement.naturalHeight

و

imageElement.naturalWidth

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


الشيء الآخر الذي نسيته هو أنك لا تستطيع التحقق من حجم الصورة قبل تحميله. عندما يفحص المؤلف جميع الطرق المنشورة ، سيعمل على الأرجح فقط على المضيف المحلي. بما أنه يمكن استخدام jQuery هنا ، تذكر أن الحدث "جاهز" يتم تشغيله قبل تحميل الصور. $ ('# xxx'). يجب تشغيل العرض () و .height () في حدث onload أو في وقت لاحق.


باستخدام JQuery يمكنك القيام بذلك:

var imgWidth = $("#imgIDWhatever").width();

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

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

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

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

طلب نيكي دي 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()));
}

في الآونة الأخيرة كان لدي نفس المشكلة لخطأ في شريط التمرير المرن. تم تعيين ارتفاع الصورة الأولى أصغر بسبب تأخير التحميل. جربت الطريقة التالية لحل هذه المشكلة وعملها.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

سيعطيك هذا الارتفاع بالنسبة للعرض الذي قمت بتعيينه بدلاً من العرض الأصلي أو صفر.


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

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

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

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';

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

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

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


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

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';

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


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;

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

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

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 ...

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.

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





jquery-plugins