Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
341
Help us understand the problem. What is going on with this article?
@kenzooooo

かっこよすぎる!JavaScriptで、画像に多く使われている色を背景色に設定しよう!サンプルコード付き

More than 3 years have passed since last update.

画像に多く使われている色を背景色に設定しよう!

みなさん下の図のように、商品画像と背景が似たようないろになっている画面を見たことがあると思います。
下の図のような画面では、画像に多く使われている色(ドミナントカラー)を背景色に設定しています。
(※下記の画面はwebサイトではない(itunes)ため参考程度ですが)
この記事では、ドミナントカラーを背景色に設定するまでをサンプルを追いながら紹介していきます。

スクリーンショット 2016-05-23 12.49.26.png

実装

jquery.adaptive-backgrounds.js
このライブラリを使用することで誰でも簡単に、画像のドミナントカラーを背景色に設定することができます。

1. jquery.adaptive-backgrounds.js をダウンロードする

bowerを利用している方は下記のコマンドでダウンロードすることができます。

bower install --save adaptive.background

bowerを利用していない方でも、jquery.adaptive-backgrounds.jsここから下の図の
Download ZIP のボタンを押してダウンロードすることができます。


スクリーンショット-2016-05-23-13.15.44.png


2. サンプルソース

サンプルのコードが下記になります。

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style type="text/css">

  body {
    background-color: #999999;
  }
  .sampleContents {
    width: 100%;
    height: 600px;
    background-color: #fff;
  }

</style>
</head>
<body>

  <div class="sampleContents adaptive-target">
    <img
      src="https://qiita-image-store.s3.amazonaws.com/0/83231/c60f3d3c-4e6c-fc3c-8b99-a9724408fff3.png"
      class="sampleImage"
      data-adaptive-background/>
    <h1>サンプルH1</h1>
    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
  </div>

</body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="./yourpath/src/jquery.adaptive-backgrounds.js"></script>

<script>

// ドミナントカラー抽出用
var adaptive_params = {
  selector: '.sampleImage',
  // 背景色を適用する対象セレクタ
  parent: '.adaptive-target',
  // 背景色の明度に合わせてフォントカラーを変更するかどうか
  normalizeTextColor: true,
  // 明度に合わせたフォントカラー
  normalizedTextColors: {dark: '#000', light: '#fff'},
  // 背景色適用範囲
  // exclude: ['rgb(0,0,0)', 'rgba(255,255,255)'],
  // 明度に合わせたクラス適用
  // lumaClasses: {light: 'ab-light', dark: 'ab-dark'}
};

// 色適用実行
$.adaptiveBackground.run(adaptive_params);

</script>
</html>

画像のサンプル
SAYA151005388371_TP_V.png
ぱくたそ

上記サンプルでは、var adaptive_paramsに設定を施しているのですが、その際にselectorで指定している箇所が対象の画像のセレクタです。parentで指定している箇所にはselectorに指定された画像のドミナントカラーが背景色として設定されます。
また、imgタグの属性としてdata-adaptive-backgroundを設定することが必須になります。

$.adaptiveBackground.run(adaptive_params);

上記のコードが背景色を設定する実処理です。
また、任意ですが他にもオプションを設定できるのでソースコードのコメントを参照してください。

ブラウザで開くと下の図のようになります。
スクリーンショット 2016-05-23 15.39.12.png

3. 画像をbackground-image で表示する場合のサンプル

div等に背景画像として設定した場合にも対応できます。

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style type="text/css">

  body {
    background-color: #999999;
  }
  .sampleImage {
    width: 240px;
    height: 180px;
    background-image: url(https://qiita-image-store.s3.amazonaws.com/0/83231/c60f3d3c-4e6c-fc3c-8b99-a9724408fff3.png);
    background-position: center center;
    background-size: cover;
  }
  .sampleContents {
    width: 100%;
    height: 600px;
    background-color: #fff;
  }

</style>
</head>
<body>

  <div class="sampleContents adaptive-target">
    <div class="sampleImage" data-adaptive-background data-ab-css-background>
    </div>
    <h1>サンプルH1</h1>
    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
  </div>

</body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="./yourpath/src/jquery.adaptive-backgrounds.js"></script>

<script>

// ドミナントカラー抽出用
var adaptive_params = {
  selector: '.sampleImage',
  // 背景色を適用する対象セレクタ
  parent: '.adaptive-target',
  // 背景色の明度に合わせてフォントカラーを変更するかどうか
  normalizeTextColor: true,
  // 明度に合わせたフォントカラー
  normalizedTextColors: {dark: '#000', light: '#fff'},
  // 背景色適用範囲
  // exclude: ['rgb(0,0,0)', 'rgba(255,255,255)'],
  // 明度に合わせたクラス適用
  // lumaClasses: {light: 'ab-light', dark: 'ab-dark'}
};

// 色適用実行
$.adaptiveBackground.run(adaptive_params);

</script>
</html>

上記サンプルでは、imgタグではなくdivタグにbackground-imageを指定するサンプルです。
変化点としては

  • imgタグ を divタグ に変更
  • styleを追加
  • divタグにdata-ab-css-background属性を追加

上記3点のみでdivへの適用が可能になります。

その他

実際に試してはいないのですが、lazy loadを利用する場合はlazyloadが実行された後にrunを実行しないと背景色の抽出が行われないようです。

以上になります。

341
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
usestrict
集客・収益化を加速させるCMS「メディプロ」の開発/運営を行っております。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
341
Help us understand the problem. What is going on with this article?