ファッション系のECサイトで役立ちそうな服やアクセサリーの画像を切り替える「着せ替え」機能の実装方法 | インクループ株式会社

menu

Home
ＷＥＢ制作 , ＴＩＰＳ
ファッション系のECサイトで役立つ！服やアクセサリー画像の「着せ替えアプリ」機能の実装方法

記事の詳細

ファッション系のECサイトで役立つ！服やアクセサリー画像の「着せ替えアプリ」機能の実装方法

ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。

今回のブログの見出しはコチラです！

1 使用する言語
2 着せ替え機能のサンプル
3 各種コードの説明

使用する言語

HTML
CSS
JavaScript
jQuery

※JavaScriptやjQueryの基本的な使い方は割愛させてただきます。

着せ替え機能のサンプル

服の画像をクリックすると、服を組み合わせた画像を上部に表示します。

各種コードの説明

HTMLコード

<div id="kisekae-area">
  <img class="base-img" src="https://incloop.com/wp-content/uploads/2020/07/base.png">
</div>

<div id="select-img-area">
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item1.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item2.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item3.png">
  </p>
  <p class="select-img">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4-cutout.png">
    <img src="https://incloop.com/wp-content/uploads/2020/07/item4.png">
  </p>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

</div>

</p>

</p>

</p>

</p>

</div>

class「base-img」の要素には、切り替えても消さない基準となる画像を入れておきます。

class「select-img」の二枚の画像は、一枚目がユーザーがクリックする選択用の画像、二枚目は着せ替え用の画像として使います。
二枚目の画像は着せ替えのみに使いますので、CSSの設定で非表示化しておきます。

着せ替え用の画像を作成する際には、基準となる画像と同じサイズで、レイヤーのように組み合わせた際に違和感が無いような位置に調整して作成します。

jQuery(JavaScript)コード

<script>
<!--
  jQuery(function($) {
    // 画像エリアクリックイベント
    $('.select-img').on('click', function(){
      $(this).toggleClass('selected');
      change_img();
    });

    // 画像変更処理
    function change_img(){
      var s_html = '';
      var i_z_index = 1;
      $('.select-img.selected').each(function(index, element){
          s_html += '<img src="' + $(element).find('img').eq(1).attr('src') + '" style="z-index:' + i_z_index + '">';
          i_z_index++;
      });
      // 要素削除
      $('#kisekae-area img').each(function(index, element){
        if(!$(this).hasClass('base-img')){
          $(this).remove();
        }
      });
      // 要素追加
      $('#kisekae-area').append(s_html);
    }
  });
-->
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!--

jQuery(function($) {

// 画像エリアクリックイベント

$('.select-img').on('click', function(){

$(this).toggleClass('selected');

change_img();

});

// 画像変更処理

function change_img(){

var s_html = '';

var i_z_index = 1;

$('.select-img.selected').each(function(index, element){

s_html += '<img src="' + $(element).find('img').eq(1).attr('src') + '" style="z-index:' + i_z_index + '">';

i_z_index++;

});

// 要素削除

$('#kisekae-area img').each(function(index, element){

if(!$(this).hasClass('base-img')){

$(this).remove();

}

});

// 要素追加

$('#kisekae-area').append(s_html);

}

});

-->

</script>

画像がクリックされたら、HTMLコードに予め仕込んである二枚目の画像のURLを取り出し、z-indexを正しい順序で埋め込みながらimgタグを生成します。

選択済みのimgタグを全て取得したら、class「base-img」以外の画像を一度消して、選択された画像のみで取得したimgタグを着せ替え画像のエリアに埋め込みます。

※z-indexは後半に取得した要素ほど上にくるような処理になっているため、画像の順番に気を付けてください。

CSS（スタイルシート）の設定

<style>
#kisekae-area {
    border: solid;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
}
#select-img-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.select-img {
    border: solid 1px #000;
    text-align: center;
    padding: 10px;
    width: 20%;
    margin-right: 5px;
    cursor: pointer;
}
.select-img img {
    display: none;
}
.select-img img:first-child {
    display: inline-block;
}
.select-img:hover {
    background-color: #e6e6e6;
    opacity: 0.6;
}
.select-img.selected {
    background-color: #e6e6e6;
}
#kisekae-area img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#kisekae-area img.base-img {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
}
</style>

1

2

3

4

5

6

7

8

9

10

11

12