1. /
  2. /
  3. [HTML5] カメラをJSで操作しフォトフレーム付き写真を撮影する
     
  •   

[HTML5] カメラをJSで操作しフォトフレーム付き写真を撮影する

  • このエントリーをはてなブックマークに追加
  • LINEで送る
この記事は 2019年7月29日 に書かれたものです

以前、JavaScriptでカメラを操作し写真を撮影するサンプルコードを作成しましたが、今回はそこにフォトフレームを合成してみたいと思います。

プリクラやスマホアプリでよくある見かけるやつですね。撮影した画像をダウンロードすることもできます。

- Sponsored Link -

HTML5カメラ（フォトフレーム付き版）

実行例

以下のページから実際にサンプルを実行できます。

HTML5 Camera フレーム付き
https://miku3.net/html5/camera-frame/
miku3.net

PC用Webブラウザ専用です。スマホでの動作は考慮していません。

前回と同様に初回のアクセス時にWebブラウザから、このサイトにカメラの操作を許可して良いか聞かれますので「許可」ボタンをクリックしてください。「ブロック」ボタンを押すと設定を変更するのにメニューの少し深いところに潜る必要がありますのでご注意を。

ソースコード

本題と関係のないCSSやJSは別ファイルにしています。

絵や音などの素材はこのページの後半に掲載しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5 Camera フレーム付き</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="all">
  <style>
    canvas{ border:1px solid gray; }
    #camera{ position:absolute; z-index:10; }
    #frame{ position:absolute; z-index:20; }
    #still{ display:none; }
  </style>
</head>
<body>

<h1>フレーム付きカメラ</h1>

<section id="contents">
  <!-- カメラ映像 -->
  <video id="camera" width="640" height="480" muted></video>

  <!-- フレーム -->
  <canvas id="frame" width="640" height="480"></canvas>

  <!-- シャッター -->
  <div id="shutter-inner">
    <button id="btn-shutter" type="button"><img src="icon/camera-solid.svg" width="32" height="32"></button>
  </div>

  <!-- フレーム切り替え -->
  <div id="frame-inner">
    <h2>フレーム切り替え</h2>
    <ul id="framelist">
    </ul>
  </div>
</section>

<!-- 合成用Canvas(不可視) -->
<canvas id="still" width="640" height="480"></canvas>

<!-- ダイアログ -->
<div id="dialog-outer">
  <!-- 最終結果 -->
  <div id="dialog-result" class="dialog">
      <img id="dialog-result-close" src="icon/times-circle-regular.svg" width="48" height="48">
      <p><canvas id="result" width="640" height="480"></canvas></p>
      <button id="dialog-result-dl" type="button">
        <img src="icon/download-solid.svg" width="48" height="48">
      </button>
  </div>

  <!--  NowLoading -->
  <div id="dialog-nowloading" class="dialog">
    ...Now Loading
  </div>
</div>
<!-- /ダイアログ -->

<audio id="se" preload="auto">
  <source src="se/camera-shutter1.mp3" type="audio/mp3">
</audio>

<script src="util.js" type="text/javascript"></script>
<script>
//-----------------------------------------------------
// グローバル変数
//-----------------------------------------------------
const VIDEO = document.querySelector("#camera");    // <video>
const FRAME = document.querySelector("#frame");     // <canvas>
const STILL = document.querySelector("#still");     // <canvas>
const SE    = document.querySelector('#se');

/** フレーム素材一覧 */
const FRAMES = [
    {large:"image/frame1.png", small:"image/frame1_s.png"}
  , {large:"image/frame2.png", small:"image/frame2_s.png"}
  , {large:"image/frame3.png", small:"image/frame3_s.png"}
];

/** カメラ設定 */
const CONSTRAINTS = {
  audio: false,
  video: {
    width: 640,
    height: 480,
    facingMode: "user"   // フロントカメラを利用する
    // facingMode: { exact: "environment" }  // リアカメラを利用する場合
  }
};

//-----------------------------------------------------
// onload
//-----------------------------------------------------
window.onload = () => {
  //-----------------------------
  //カメラを<video>と同期
  //-----------------------------
  syncCamera();

  //-----------------------------
  // フレーム初期化
  //-----------------------------
  drawFrame(FRAMES[0].large);   // 初期フレームを表示
  setFrameList();               // 切り替え用のフレーム一覧を表示

  //-----------------------------
  // シャッターボタン
  //-----------------------------
  document.querySelector("#btn-shutter").addEventListener("click", ()=>{
    // SE再生＆映像停止
    VIDEO.pause();
    SE.play();

    // 画像の生成
    onShutter();                                    // カメラ映像から静止画を取得
    concatCanvas("#result", ["#still", "#frame"]);  // フレームと合成

    // 最終結果ダイアログを表示
    setTimeout( () => {                // 演出目的で少しタイミングをずらす
      dialogShow("#dialog-result");
    }, 300);
  });

  //-----------------------------
  // ダイアログ
  //-----------------------------
  // 閉じるボタン
  document.querySelector("#dialog-result-close").addEventListener("click", (e) => {
    VIDEO.play();
    dialogHide("#dialog-result");
  });

  // ダウンロードボタン
  document.querySelector("#dialog-result-dl").addEventListener("click", (e) => {
    canvasDownload("#result");
  });
};

/**
 * [onload] カメラを<video>と同期
 */
function syncCamera(){
  navigator.mediaDevices.getUserMedia(CONSTRAINTS)
  .then( (stream) => {
    VIDEO.srcObject = stream;
    VIDEO.onloadedmetadata = (e) => {
      VIDEO.play();
    };
  })
  .catch( (err) => {
    console.log(`${err.name}: ${err.message}`);
  });
}

/**
 * [onload] フレーム一覧を表示する
 *
 * @return {void}
 **/
 function setFrameList(){
  const list = document.querySelector("#framelist");
  let i=0;
  FRAMES.forEach(item => {
    const li = document.createElement("li");
    li.innerHTML = `<img src="${item.small}">`; // <li><img ...></li>
    li.classList.add("framelist");              // <li class="framelist" ...
    li.setAttribute("data-index", i++);         // <li data-index="1" ...

    // クリックされるとフレーム変更
    li.addEventListener("click", (e)=>{
      const idx = e.target.parentElement.getAttribute("data-index");    // 親(parent)がli
      drawFrame(FRAMES[idx].large);
    })

    // ulに追加
    list.appendChild(li);
  });
}

/**
 * 指定フレームを描画する
 *
 * @param {string} path  フレームの画像URL
 * @return {void}
 */
function drawFrame(path){
  const modal = "#dialog-nowloading";
  const image = new Image();
  image.src = path;
  image.onload = () => {
    const ctx = FRAME.getContext("2d");
    ctx.clearRect(0, 0, frame.width, frame.height);
    ctx.drawImage(image, 0, 0, frame.width, frame.height);
    dialogHide(modal);
  };
  dialogShow(modal);
}

/**
 * シャッターボタンをクリック
 *
 * @return {void}
 **/
function onShutter(){
  const ctx = STILL.getContext("2d");
  // 前回の結果を消去
  ctx.clearRect(0, 0, STILL.width, STILL.height);

  // videoを画像として切り取り、canvasに描画
  ctx.drawImage(VIDEO, 0, 0, STILL.width, STILL.height);
}

/**
 * ダイアログを表示
 *
 * @param {string} id
 **/
function dialogShow(id){
  document.querySelector("#dialog-outer").style.display = "block";
  document.querySelector(id).style.display = "block";
}

/**
 * ダイアログを非表示
 *
 * @param {string} id
 **/
 function dialogHide(id){
  document.querySelector("#dialog-outer").style.display = "none";
  document.querySelector(id).style.display = "none";
}
</script>
</body>
</html>

解説

大まかな原理

Canvasの背景は基本的に透過色です。
position: absoluteなどを指定した2つのCanvasを重ね合わせ、下にカメラ映像、上にフォトフレームを貼り付ければ完成です。フォトフレーム用の画像はカメラの映像を出したい部分を透過処理するのをお忘れなく。

その後「シャッター」ボタンをクリックしたタイミングで2つのCanvasを合成しています。

複数Canvasの合成

詳しくは過去ログをご覧くださいませ。

[HTML5] 複数のCanvasを合成する
https://blog.katsubemakito.net/html5/canvas-concat
今回は複数のcanvasタグを合成し、最終的に1つのcanvasに画像として結合する処理を取り上げたいと思います。↑こんな感じで画像を表示したcanvasと、キャプションを表示したcanvasを合成します。Canvas合体サンプル以下のページから実際にサンプルを実行できます。「＝」ボタンをクリックすると左2つのCanvasを合成し、一番右側のcanvasに合成結果を出力します。消しゴムボタンをクリックすると合成結果を削除します。ソースコード<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title&g...
ねこの足跡R

Canvasのダウンロード

こちらも詳細は過去ログをご覧くださいませ。

[HTML5] Canvasを画像としてダウンロード
https://blog.katsubemakito.net/html5/canvas-download
canvasタグに現在描画されている内容を画像としてクライアントにダウンロードしてみます。Webブラウザなどのクライアントだけで完結するためサーバの負荷などを気にする必要がありません。今回はひたすらカウントアップするcanvasを、ボタンを押したタイミングでダウンロードできるサンプルです。Canvasダウンロードサンプル以下のページから実際にサンプルを実行できます。適当なタイミングで「ダウンロード」ボタンをクリックしてください。クリックした瞬間のcanvasの状態が画像としてダウンロードされます。ソースコード<!DOCTY...
ねこの足跡R

素材

参考ページ

コメント

ご感想やご質問などお気軽にどうぞ。書き込むにはfacebookへのログインが必要です。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal（ペイパル）
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

関連した記事

同じカテゴリの記事

旧コメント欄（表示のみ）

※こちらのコメント欄は以前稼働していたものです。現在は新たに書き込むことはできません。ご感想やご質問は記事の下にあるコメント欄をご利用ください。
  1. 匿名 より:
    2019年11月15日 9:08 PM

    非常にためになります。が、リンクなどが微妙に壊れているのはもったいないですね。%5Dみたいな余計な文字が入っています。

    返信
  2. 勝部 麻季人 より:
    2019年11月18日 1:24 PM

    ご指摘ありがとうございますー。どうやらWordpressのプラグインがいつの間にか無効になっていたようです。現在は復旧いたしました。

    返信