webカメラを使って、1000px ×1000px のプロフィール画像を量産してくれるサイトをつくった

完成品
---
サイト名:1000×1000 証明写真
https://id-photo.ml (ダメだったらこっち:https://id-photo.herokuapp.com/)

作り方！！
---
・まずファイル構造はこんな感じ
<img width="186" alt="スクリーンショット 2020-05-21 0.03.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/ade00daa-8643-ca96-532b-dc100912d6b3.png">
今回herokuを使ってデプロイするために、gitやら何やらが入っています。(もしかしたら、必要ないファイルもあるかも。すみません...)

---
・コード記述内容

```html:index.html
<!DOCTYPE html>
<html>

<head>
  <title>1000×1000証明写真</title>
</head>

<body>
  <b>1000×1000証明写真</b>
  <div id="app">
    <div>
      <video ref="video" id="video" width="500" height="500" autoplay></video>
      <div>
        <button color="info" id="snap" v-on:click="capture()"><img src="img/icon.png"></button>
      </div>
      <canvas ref="canvas" id="canvas" width="1000" height="1000"></canvas>
      <ul>
      <li class="capture" v-for="c in captures" v-bind:key="c.d">
        <img v-bind:src="c" height="50" />
      </li>
      </ul>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        video: {},
        canvas: {},
        captures: []
      },
      mounted () {
        this.video = this.$refs.video
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
            this.video.srcObject = stream
            this.video.play()
          })
        }
      },
      methods: {
        capture () {
          this.canvas = this.$refs.canvas
          this.canvas.getContext('2d').drawImage(this.video, 0, 0, 1000, 1000)
          this.captures.push(this.canvas.toDataURL('image/png'))
          console.log(this.captures)
        }
      }
    });
  </script>

</body>
</html>

<style>
#canvas {
  display: none;
}
.capture {
  /* display: inline; */
  padding: 5px;
}
</style>
```


```js:index.js
const express = require('express');
const app = express();

// public というフォルダに入れられた静的ファイルはそのまま表示
app.use(express.static(__dirname + '/public'));

// bodyParser
var bodyParser = require('body-parser');
app.use(bodyParser.json());

// POSTリクエストを受け付ける
app.post('/post', function (req, res) {

    for (key in req.body) {
        console.log(key, '=', req.body[key]);
    }
    res.end();

    res.send('hello world(POST)');
});

// GET リクエストを受け付ける
app.get('/get', function (req, res) {
    res.send('hello world(GET)');
});

//app.listen(8080);
app.listen(process.env.PORT || 8080);

console.log("server start! (heroku)");
```

```git:.gitignore
# Dependency directories
node_modules/

# Optional npm cache directory
.npm
```

```procfile:Procfile
web: node index.js
```

そのほかのファイルは下記コマンドからインストールできます。

```コマンド:
npm init -y
npm i body-parser express
```



完成
---
触って遊んでみましょう。

<b>step1「サイトへ飛ぶ」</b>
https://id-photo.ml (ダメだったらこっち:https://id-photo.herokuapp.com/)

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/de41103e-38dc-9c94-8454-261176709ff0.jpeg)

---
<b>step2「カメラアイコンをクリックして撮影」</b>
カメラのアイコンをクリックすると、1000px × 1000px の画像が下に量産されていきます。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/33a0c999-06d1-4ec5-fd05-d2d9ffc46a27.jpeg)

---
<b>step3「画像をダウンロード」</b>
量産された画像の上で、右クリックをするとメニューがでるので、そこで「名前を付けて画像を保存...」を選択してください。
<img width="1272" alt="3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/e79c0d7e-1b46-9d3d-7eb0-e155dbcd04aa.jpeg">

ダウンロードされた画像が、少し縦に伸びている感じになっているのはスリム効果です。

おわり
---
一応、今回使用した画像を貼っておきます。ご自由に使用してください。
![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603301/17c654f2-6c4b-c0d8-3456-294930b76e8c.png)

また今回参考にさせていただいた記事です
・https://qiita.com/kino15/items/8f8feffca54015555f4b


最後まで読んでいただきありがとうございました。