やりたいこと

(vue.jsで)写真を撮ってサムネをリスト表示したい。
リストはElementのコンポーネントを使用。
コンポーネントの使い方とファイルPOSTに関してはこちらに書いてます。

ロジック

<video>で撮影
<canbas>でキャプチャ
キャプチャをblob形式に変換してリストに追加

1~2の実装方法はこちらで紹介されています。
ポイントは<video>や<canbas>に'refs'属性をつけ、vue.js標準のrefsでアクセスして、
vueコンポーネントのdataにバインドさせてるとこです。....って書かれてます。

これに手順3を追加で実装。
今回使用したElementコンポーネントのプロパティ割り当てはこんな感じ。

１つ目はカメラで撮ったもので、２つ目はファイルを選択して追加してます。
ファイルを選択した場合はFileオブジェクトがrawプロパティに格納されている。
canvasの画像は別に保存したくないのでblob型に変換してrawに突っ込んだらFormDataで問題なくPOSTもできました。

methods: {
    capture() {
        this.canvas = this.$refs.canvas;
        var context = this.canvas.getContext("2d").drawImage(this.video, 0, 0, 640, 480);
// ここを修正
//        this.captures.push(canvas.toDataURL("image/png"));
        this.canvas.toBlob((blob) => {
        {{'Elementコンポーネントのfile-listに割り当てているオブジェクト'}}.push({name: 'camera',
          status: 'success',
          url: URL.createObjectURL(blob),
          raw: blob
        })
      })
    }
}

感想

デバッグ中めちゃくちゃ自撮りした

Vue.jsでカメラを使う

やりたいこと

ロジック

感想