web-dev-qa-db-fra.com

Comment obtenir la taille de l'image d'arrière-plan dans jQuery?

Le problème est simple. Comment obtenir la taille de l'image d'arrière-plan d'une div (largeur et hauteur) dans jQuery. Est-ce même possible? Je pensais que cela fonctionnerait:

jQuery('#myDiv').css('background-image').height();

Le message d'erreur que je reçois est que ceci n'est pas une fonction.

jquerycss
51
Foad

Vous devrez faire quelque chose comme ça:

var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
    var height = $(this).height();
    alert(height);
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);

En raison de la simplicité du code, vous ne pouvez pas utiliser de parenthèses ni de guillemets dans les URL de vos images d'arrière-plan. Cependant, le code pourrait être étendu pour un meilleur support. Je voulais juste transmettre l'idée générale.

33
John Kurlak

Une version de plus. Aucune manipulation DOM requise, tous les caractères du nom de fichier image pris en charge.

UPDATEVoir une version alternative ci-dessous.

var image_url = $('#something').css('background-image'),
    image;

// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    // just in case it is not already loaded
    $(image).load(function () {
        alert(image.width + 'x' + image.height);
    });

    image.src = image_url;
}

Solution 2018

Cette réponse reçoit toujours des votes positifs 5 ans après. Je pensais partager une solution plus complète. Cela repose sur le code d'origine et l'enveloppe dans une fonction. Il utilise jQuery Deferred Object, ajoute la gestion des erreurs et met à jour RegExp pour correspondre à 3 cas possibles: url(), url("") et url(''). Cela fonctionne également sur jQuery 1 à 3.

var getBackgroundImageSize = function(el) {
    var imageUrl = $(el).css('background-image').match(/^url\(["']?(.+?)["']?\)$/);
    var dfd = new $.Deferred();

    if (imageUrl) {
        var image = new Image();
        image.onload = dfd.resolve;
        image.onerror = dfd.reject;
        image.src = imageUrl[1];
    } else {
        dfd.reject();
    }

    return dfd.then(function() {
        return { width: this.width, height: this.height };
    });
};

//
// Usage
//
getBackgroundImageSize(jQuery('#mydiv'))
    .then(function(size) {
        console.log('Image size is', size.width, size.height);
    })
    .fail(function() {
        console.log('Could not get size because could not load image');
    });
84
Vilius Paulauskas

Réponse tardive, mais vous pouvez aussi faire ceci:

var img = new Image;
img.src = $('#myDiv').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgWidth = img.width;
var bgImgHeight = img.height;

Ensuite, vous n'avez pas à manipuler les objets dom;

26
Jon

Un autre chemin court:

function bgSize($el, cb){
    $('<img />')
        .load(function(){ cb(this.width, this.height); })
        .attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);
}

usage

bgSize($('#element-with-background'), function(width, height){
    console.log('width : ' + width + ' height : ' + height);
});

https://jsfiddle.net/x4u2ndha/58/

4
Freez

J'ai fusionné la réponse de John avec le style de plug-in de Stryder. Ce plugin attend que l'image se charge:

$.fn.getBgImage = function(callback) {
    var height = 0;
    var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
    var tempImg = $('<img />');
    tempImg.hide(); //hide image
    tempImg.bind('load', callback);
    $('body').append(tempImg); // add to DOM before </body>
    tempImg.attr('src', path);
    $('#tempImg').remove(); //remove from DOM
};


// usage
$("#background").getBgImage(function() {
    console.log($(this).height());
});

n'hésitez pas à étendre ce code: https://Gist.github.com/1276118

3
schmidsi

J'ai fait la même chose pour la largeur :)

$.fn.getBgWidth = function () {
    var width = 0;
    var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
    var tempImg = '<img id="tempImg" src="' + path + '"/>';
    $('body').append(tempImg); // add to DOM before </body>
    $('#tempImg').hide(); //hide image
    width = $('#tempImg').width(); //get width
    $('#tempImg').remove(); //remove from DOM
    return width;
};
2
Jankeesvw

Cela faisait longtemps, mais j'avais également besoin de cette solution. Sur la base de quelques solutions suggérées, voici ma solution complète.

$.fn.getBgHeight = function () {
        var height = 0;
        var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
        var tempImg = '<img id="tempImg" src="' + path + '"/>';
        $('body').append(tempImg); // add to DOM before </body>
        $('#tempImg').hide(); //hide image
        height = $('#tempImg').height(); //get height
        $('#tempImg').remove(); //remove from DOM
        return height;
    };
2
Stryder

Peut-être que peu de possibilités, j'ai essayé de simplifier autant et finalement ça marche pour moi

var img = new Image ;
img.src = $('#dom').css('background-image').replace("url(", "").replace(")", "").replace("\"", "").replace("\"", "");
$(img).load(function() {
    var bgImgWidth = img.width;
    var bgImgHeight = img.height;
    console.log("w::"+bgImgWidth+",h::"+bgImgHeight) ;
}) ;
1
Christophe

Voici ma traduction.

$.fn.getBgImage = function (callback) {
    var path = $(this).css('background-image').match(/^url\("?(.+?)"?\)$/)[1];
    var tempImg = $('<img />').hide().bind('load', function () {
        callback($(this).width(), $(this).height());
        $(this).remove();
    }).appendTo('body').attr('src', path);
};

Usage:

imgDiv.getBgImage(function (imgW, imgH) {
    //use the imgW and imgH here!   
});
1
box86rowh

css ('background-image') retournera "url (.....)", vous ne pouvez pas tester la hauteur de l'image avec cela, car ce n'est pas un objet DOM.

1
Capsule

les mêmes que ci-dessus, mais en utilisant regexp au lieu de replace ()

$.fn.extend({
    /**
     * gets background image
     * @param callback function (inside - this = HTMLElement image)
     */
    get_bg_image: function(callback) {
        if (typeof callback != 'function') return;
        var regexp = /url\((.+)\)/i,
            regexp2 = /["']/gi,
            res = regexp.exec($(this).css('background-image')),
            img_src = res[1].replace(regexp2, ''),
            $tempImg = $('<img />');
        $tempImg.hide();
        $tempImg.bind('load', function(e) {
            callback.call(this, e);
            $tempImg.remove();
        });
        $('body').append($tempImg);
        $tempImg.attr('src', img_src);
    }
});

// usage
$('div').get_bg_image(function() {
    var bg_img_width = $(this).width();
});
1
xramonz

Ce qui suit est mon adaptation:

$.fn.getBgDim = function (callback) {
    var width  = 0,
        height = 0,
        path   = $(this).css("background-image").replace("url(", "").replace(")", "").replace("\"", "").replace("\"", ""),
        tmp    = $("<img />");
    tmp.hide();
    tmp.bind("load", function() {
        width = $(this).width(); 
        height = $(this).height();
        callback({"width": width, "height": height});
        $(this).remove();
    });
    $("body").append(tmp);
    tmp.attr('src', path);
};

Usage:

$("#image").getBgDim(function(dim) {
    console.log("Height: " + dim.height + " Width: " + dim.width);
});
1
Bas

Dans le cas où votre css avait des guillemets doubles ou une manipulation du navigateur, procédez comme suit.

var url = $('#myDiv').css('background-image').replace('url(','').replace(')','').replace('"','').replace('"','');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
    var height = $(this).height();
    alert(height);
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);
0
Designaroni

Version combinée des solutions ci-dessus

var width,
    height;

$(image).load(function () {
    width  = image.width;
    height = image.height;
});

image.src = $('#id').css('background-image').replace(/url\(|\)$/ig, "");
0
holger