この数ヶ月継続して、開発している案件で、商品パッケージの画層を愛猫に差し替えて、合成し、それをSNSで投稿できるというサイトをいくつも作っています。

本来、商品パッケージ写真には、モデル猫が入っているいますが、モデル猫を自分の愛猫にして独自のパッケージ写真が作れます。

html5のcanvasタグ内で透過pngの階層の下に撮影した愛猫を合成するという処理です。こちらを実現できたのがkonva.jsのhtml5のjsライブラリーです。

はじめの頃は、スマホのビデオ撮影機能を利用して、pngの透過画像越しに愛猫を撮影して、それをスクショのように切り取って保存するという手法をとっていましたが、上手く枠内に収めるのは難しいため、撮影済みの写真を合成できるようにしてほしいとのことで、探しだしたのがKonva.jsでした。

どのようなことができるのかは、リンク先（英語です）を見ていただけば分かりますが、かいつまむと以下のうような処理が出来ます。

• canvas内に円や四角形、三角形などの図形をパラメーターで指定して描くことができる
• いくつもの画像を重ね合わせて描くこともできる
• フリーハンドでスマホなら指で、PCならマウスで絵を描くことができる
• 画像の縮尺を変えたり、回転さることができる
• 合成した画像はajaxを利用して保存できる
• 画像の品質は画面上の大きさだけでなく高解像で書き出せる

このほか画像のエフェクトやグラデーション、アニメーションなどもできますので、工夫次第で様々なwebアプリケーションが作れると思います。

Konva.jsでの合成処理の手順

まず、土台となるstrageを宣言します。

const stage = new Konva.Stage({
  container: 'container',
  width: container_w,
  height: container_h,
});

次に、描画用のlayerを用意して、それをstageに加えます。

	const layer = new Konva.Layer();
	stage.add(layer);

このlayerにユーザー画像を取り込み、回転できるようにして、透過画像を重ねて、合成ボタンが押されたらstrageをajaxで書き出す処理を行います。

	 
    const imageObj = new Image();
    imageObj.onload = function () {
    const userimg  = new Image();
    Konva.Image.fromURL(
       //ユーザー画像を取り込み
       layer.add(userimg);
       const tr = new Konva.Transformer({
           nodes: [userimg]
       });
       layer.add(tr);
       //イベント駆動でajaxで書き出す処理
    )
    };

layerにユーザー画像を加え、それを回転させた画像を重ね、最終的に画面上の合成ボタンを押したタイミングで状態でstrageを確定し、生成された画像を指定したphpプログラムに送信して、DBにbase64で書き出しています。

その際、スマホの画面サイズではなく、書き出す解像度を指定できますから、高解像の合成写真を生成できます。

顔写真を撮影して、予め用意したメガネフレームと合成して、遠隔で自分に似合うか確認してみるというサイトも以前開発しました。同様に衣装を合わせや、ヘアースタイル確認など様々な顧客サービスがユーザー自ら遠隔で行えるので、今の時代にマッチしたサービスですが作れると思います。ご興味のある方はお問合わせください。

以上です。