使用 JavaScript 获取 CSS 背景图像的大小？

Question

是否可以使用 JavaScript 来获取 CSS 引用的背景图像的实际大小（以像素为单位的宽度和高度）？

Answer 1

是的，我会这样做......

window.onload = function () {
  var imageSrc = document
    .getElementById('hello')
    .style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2')
    .split(',')[0];

  // I just broke it up on newlines for readability

  var image = new Image();
  image.src = imageSrc;

  image.onload = function () {
    var width = image.width,
      height = image.height;
    alert('width =' + width + ', height = ' + height);
  };
};

一些笔记...

• 我们需要删除 JavaScript 返回的url() 部分以获取正确的图像源。我们需要在, 上拆分，以防元素有多个背景图片。
• 我们创建一个新的Image 对象并将其src 设置为新图像。
• 然后我们可以读取宽度和高度。

jQuery 可能不会那么令人头疼。

Answer 2

无法在答案下发表评论，所以这里是包含 background-size 的 jQuery 版本（发布是因为这个问题是谷歌搜索中的第一个问题，可能对我以外的其他人有用）：

function getBackgroundSize(selector, callback) {
  var img = new Image(),
      // here we will place image's width and height
      width, height,
      // here we get the size of the background and split it to array
      backgroundSize = $(selector).css('background-size').split(' ');

  // checking if width was set to pixel value
  if (/px/.test(backgroundSize[0])) width = parseInt(backgroundSize[0]);
  // checking if width was set to percent value
  if (/%/.test(backgroundSize[0])) width = $(selector).parent().width() * (parseInt(backgroundSize[0]) / 100);
  // checking if height was set to pixel value
  if (/px/.test(backgroundSize[1])) height = parseInt(backgroundSize[1]);
  // checking if height was set to percent value
  if (/%/.test(backgroundSize[1])) height = $(selector).parent().height() * (parseInt(backgroundSize[0]) / 100);

  img.onload = function () {
    // check if width was set earlier, if not then set it now
    if (typeof width == 'undefined') width = this.width;
    // do the same with height
    if (typeof height == 'undefined') height = this.height;
    // call the callback
    callback({ width: width, height: height });
  }
  // extract image source from css using one, simple regex
  // src should be set AFTER onload handler
  img.src = $(selector).css('background-image').replace(/url\(['"]*(.*?)['"]*\)/g, '$1');
}

或作为 jQuery 插件：

(function ($) {
// for better performance, define regexes once, before the code
var pxRegex = /px/, percentRegex = /%/, urlRegex = /url\(['"]*(.*?)['"]*\)/g;
$.fn.getBackgroundSize = function (callback) {
  var img = new Image(), width, height, backgroundSize = this.css('background-size').split(' ');

  if (pxRegex.test(backgroundSize[0])) width = parseInt(backgroundSize[0]);
  if (percentRegex.test(backgroundSize[0])) width = this.parent().width() * (parseInt(backgroundSize[0]) / 100);
  if (pxRegex.test(backgroundSize[1])) height = parseInt(backgroundSize[1]);
  if (percentRegex.test(backgroundSize[1])) height = this.parent().height() * (parseInt(backgroundSize[0]) / 100);
  // additional performance boost, if width and height was set just call the callback and return
  if ((typeof width != 'undefined') && (typeof height != 'undefined')) {
    callback({ width: width, height: height });
    return this;
  }
  img.onload = function () {
    if (typeof width == 'undefined') width = this.width;
    if (typeof height == 'undefined') height = this.height;
    callback({ width: width, height: height });
  }
  img.src = this.css('background-image').replace(urlRegex, '$1');
  return this;
}
})(jQuery);

Answer 3

var actualImage = new Image();
actualImage.src = $('YOUR SELECTOR HERE').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");

actualImage.onload = function() {
    width = this.width;
    height = this.height;
}

Answer 4

var dimension, image;

image = new Image();
image.src = {url/data}
image.onload = function() {
    dimension = {
        width: image.naturalWidth,
        height: image.naturalHeight
    };
    console.log(dimension); // Actual image dimension
};

Answer 5

在 jQuery 中：

var actualImage = new Image();
actualImage.src = $('YOUR SELECTOR HERE').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");

actualImage.width // The actual image width
actualImage.height // The actual image height

感谢alex的甜蜜正则表达式。

Answer 6

如果你使用 React，你可以创建一个自定义钩子：

import { useEffect, useState, useCallback, useRef } from 'react'

const urlRgx = /url\((['"])?(.+?)\1\)/
const getImagePromise = src =>
  new Promise(resolve => {
    const img = new Image()

    img.onload = () =>
      resolve({
        src,
        width: img.naturalWidth,
        height: img.naturalHeight
      })
    img.src = src
  })
const useBackgroundImageSize = (asCallbackFlagOrUrls = false) => {
  const ref = useRef()
  const [images, setImages] = useState(null)
  const callback = useCallback(async () => {
    if (Array.isArray(asCallbackFlagOrUrls)) {
      const imgPromises = asCallbackFlagOrUrls.map(getImagePromise)
      const imgs = await Promise.all(imgPromises)

      if (ref?.current) {
        setImages(imgs)
      }
    }

    if (typeof asCallbackFlagOrUrls === 'string') {
      const image = await getImagePromise(asCallbackFlagOrUrls)

      if (ref?.current) {
        setImages(image)
      }
    }

    if (typeof asCallbackFlagOrUrls === 'boolean') {
      if (ref.current) {
        const matches = window
          .getComputedStyle(ref.current)
          .backgroundImage.match(new RegExp(urlRgx, 'g'))

        if (Array.isArray(matches)) {
          const imgPromises = matches.map(match =>
            getImagePromise(match.replace(new RegExp(urlRgx), '$2'))
          )
          const imgs = await Promise.all(imgPromises)

          if (ref?.current) {
            setImages(imgs.length > 1 ? imgs : imgs[0])
          }
        }
      }
    }
  }, [ref, asCallbackFlagOrUrls])

  useEffect(() => {
    if (asCallbackFlagOrUrls !== true) {
      callback()
    }
  }, [asCallbackFlagOrUrls, callback])

  return asCallbackFlagOrUrls === true ? [ref, images, callback] : [ref, images]
}

export { useBackgroundImageSize }

然后像这样使用它：

const App = () => {
  const [ref, image] = useBackgroundImageSize()

  console.log(image) // { width, height, src }

  return <div ref={ref} image={image} />
}

您也可以安装background-image-size-hook 并将其用作依赖项。有关更多使用详情，请参阅README。