JavaScript backgroundImageで表示された画像の縦幅と横幅

Question

backgroundImageで表示した画像の縦幅と横幅を得たいです
下だと50pxと表示されますが、これはdivの大きさであり、表示中の画像の縦幅と横幅ではありません
div.style.backgroundSize="50% 50%";やdiv.style.backgroundSize="contain";で表示した場合に表示されている大きさをpxで得たいです
画像はSVGです
どうしたらいいでしょうか？

<script>
window.onload=function(){
var div = document.createElement("div");
div.id="backg";
div.style.width="50px";
div.style.height="50px";
div.style.backgroundImage="url(http://simpleicon.com/wp-content/uploads/android.svg)";
div.style.backgroundRepeat="no-repeat";
div.style.backgroundSize="50% 50%";
div.style.backgroundPosition="center";
document.body.appendChild(div);
alert(backg.style.width);
alert(backg.style.height);
}
</script>

Comments

[退会済みユーザー]

img 要素を使ってみたらどうなりますか？ (img 要素で表示すると言っている訳ではありません)

[maisumakun]

> div.style.backgroundSize="50% 50%"

であれば、計算すれば明らかかと思うのですが、求めることはそういうものではないのでしょうか？

[qwrs]

↑どう計算式を考えますか
あなたの指摘は当然私はpxで出せるということでいいですか？

[maisumakun]

50pxの50%は25pxです。

[qwrs]

＞img 要素を使ってみたらどうなりますか？

imgを使って見たらというのはimgにbackgroundImageをかけろという意味でしょうか？

[qwrs]

50% 50%は固定ではありません
30% 70%になったりしますがどう計算式を出しますか

[qwrs]

もし簡単であればitagagaki氏の貼っていただいたような複雑なコードにならないと思います

[退会済みユーザー]

> imgを使って見たらというのはimgにbackgroundImageをかけろという意味でしょうか？

そうではないです。回答欄にどのようなことか書いておきます。

[maisumakun]

> どう計算式を出しますか

パーセンテージをかければいいだけです。

[qwrs]

簡単だとおっしゃられたのですから具体的なコード位提示いただきたく思います

[maisumakun]

そもそも論として、「何のために」その値が必要なのでしょうか？

（使い方によっては、「計算せずとも同等のことを実現できる」ということも考えられます）

[qwrs]

「計算せずとも同等のことを実現できる」ことについて詳しくお聞かせいただけないでしょうか？

[maisumakun]

> 計算せずとも同等のことを実現できる」ことについて詳しくお聞かせいただけないでしょうか？

値を使う目的がわからないと、それを実現可能なのかもわからないです。

[qwrs]

大した目的ではないですが、background-sizeで表示したsvgに合わせてimgタグを生成し、縦幅と横幅を合わせたかっただけです

[qwrs]

簡単だとおっしゃられたのに、なぜかその簡単なコードを提示していただけない理由は何かありますでしょうか？

[maisumakun]

「div.style.backgroundSize="50% 50%";」のように与えていますが、これは実際にJavaScriptから与えるものなのでしょうか？それとも、CSSに書き付けてあるものなのでしょうか？

> 簡単だとおっしゃられたのに、なぜかその簡単なコードを提示していただけない理由は何かありますでしょうか？

計算自体はすぐなのですが、背景でわからない部分が多いのでコードにするのはためらってしまいます。

[qwrs]

JavaScriptですよ
ワカラナイも何も算出方法さえわかってれば、それが全てだと思うのですが違いますか？

[maisumakun]

はい、他の回答についているコメントを見ての通り後出しが多いので、せっかく書いても無駄になりそうな感じがしています。

[qwrs]

無駄も何も簡単なことなんですから、お願いいたします
後出しのつもりもないですし、伝わり方が悪かっただけです

[qwrs]

後出しだとおっしゃるならば、なぜあなたに理解できたのでしょうか
それは後出しではないからです
一貫して伝えてますよ
あなたの理解している通りでございます

[maisumakun]

> 後出しだとおっしゃるならば、なぜあなたに理解できたのでしょうか

後出しで出されたもの追いかけて、理解を補わざるを得ませんでしたし、今でもそれでいいのかのか確証はありません。

[qwrs]

具体的にどこが後出しですか？

[qwrs]

私は編集もしていません
どこが後出しか教えて下さい

[qwrs]

他者２名が勘違いされてしまわれたので本意を伝えた迄です

[maisumakun]

他についたコメント同様の疑問として、これだけの質問を投げられるのに、（containのような場合はともかく）「パーセンテージなら掛け算で出すだけ」と伝えたにも関わらず、それをコードにできないのが不自然だと感じるのです。

[qwrs]

ですから「パーセンテージなら掛け算で出すだけ」っていうコードを提示してください
それをコードにできないことは不自然ではなくただのバカなんですよ、私は

[qwrs]

出す気がなさそうなので閉じていいですか？
itagaki氏にベストアンサーしますよ？

Answer 1

質問のコメント欄で「img 要素を使ってみたらどうなりますか？ (img 要素で表示すると言っている訳ではありません)」と書いた件です。

質問のコードの url にある svg 画像のオリジナルサイズを取得したいということと理解していますが、そうであれば JavaScript で以下のようにすれば取得できます。

<script type="text/javascript">
    var image = new Image();
    image.onload = GetImageSize;
    image.src = "http://simpleicon.com/wp-content/uploads/android.svg";

    function GetImageSize() {
        // オリジナル画像のサイズ
        var w = image.width;
        var h = image.height;
    }
</script>

結果は:

ブラウザは Chrome です。

Comments

[qwrs]

オリジナルサイズを取得したいわけじゃないんですよ
表示されてる（background-size）をかけた状態で小さくなって画面上に表示されているサイズが知りたいんです

[退会済みユーザー]

> 表示されてる（background-size）をかけた状態で小さくなって画面上に表示されているサイズが知りたいんです

質問欄に追記する形で、そのことを詳しく、ここに書いてないことは知り得ない第三者がクリアに理解できるように、書いてもらえませんか？

[itagagaki]

「表示されている大きさをpxで得たいです」って質問に書かれていますけど…

[qwrs]

background-sizeご存知ですよね？
例えばcontainを指定するとアスペクト比を保ったまま縮小されます
その縮小されて表示された画像の縦幅と横幅が知りたいんですが

[qwrs]

言ってる意味がわかりませんでしたか？
「表示されている大きさをpxで得たいです」というのはbackground-sizeを効かせた状態のpx単位を得たいということです

[退会済みユーザー]

タイトルの「JavaScript backgroundImageで表示された画像の縦幅と横幅」を読むと、自分には「質問のコードの url にある svg 画像のオリジナルサイズを取得したい」と思えたということです。

[qwrs]

なるほど、そうでしたか、それはすみません
それだったら簡単にできますね・・・

[qwrs]

もし、私の言ってる事が理解できたら、
簡単か、そうじゃないかお答えいただけないでしょうか？

[qwrs]

https://developer.mozilla.org/ja/docs/Web/CSS/background-size
上記はbackground-repeatしていますがしてないと思って見て下さい
その表示されてるサイズを取得したいです

[退会済みユーザー]

挑戦的ですね。そこまで言える知識をお持ちなら、ここで聞かなくても自分で解決できるのではと思ってしまうのですが・・・

[qwrs]

挑戦的ではありません。なぜそのように思われましたか？

[qwrs]

私には解決する能力がありません
なので答えをください

Answer 2

この記事が参考になりそうです。

javascript — JavaScriptを使用してCSS背景画像のサイズを取得しますか？

ここに書き残されているgetBackgroundSizeをちょっと試してみたところ、まずjQueryが必要なのと、ちょっとバグがあるのか正しい結果が得られなかったんですが、アプローチは良さげですので、このコードをベースに修正してみるのもいいかと思います。

---

（追記）このアプローチは画像のオリジナルサイズとbackground-sizeから表示サイズを自分で計算してみているわけで、必ずしもブラウザ（レンダリングエンジン）の結果とぴったり一致するとは限らない、という問題はありますね。用途によると思いますが。

---

コードの間違いをFixしてみました。

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).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).height() * (parseInt(backgroundSize[1]) / 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');
}

そして getBackgroundSize("#backg", (size) => alert(size.width + "," + size.height)); を試したら 25,25 と出ました。

Comments

[qwrs]

ありがとうございます

[退会済みユーザー]

紹介したサイトの記事のやり方ではうまくいかないかと。image オブジェクトの src 属性に url を設定すると、画像が読み込まれたときに image.onload イベントが発生するので、そのイベントにリスナをアタッチしてそこでサイズを取得する必要があります。

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Using_images#creating_an_image_from_scratch

[itagagaki]

img.onload = function(){}を設定していて、そこには到達していて this.width this.height でサイズの取得はできているようですよ。512x512ですよね。

[退会済みユーザー]

失礼しました。回答はそうなっていますね。質問のコードを見てました。

[qwrs]

私にはまったく理解できないコードですが、正しい答えが出ているようですね
勉強不足で申し訳ありませんでした