Vueはコンピュータカメラを呼び出して写真機能を実現します

Vueはコンピュータカメラを呼び出して写真機能を実現します

この記事の例では、コンピュータカメラを呼び出して写真機能を実現するためのvueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

実装効果図:

写真を撮る前と撮った後(パソコンのカメラが写真を遮ったため、灰色になっています)

1.写真アップロード機能をクリックして、コンピュータのカメラの権限を取得します。

2. カメラの使用を許可するを選択すると、ページ上のカメラ領域に画像が表示され始めます。

3. 写真ボタンをクリックすると、撮影した写真が右側に表示されます。保存をクリック


完全なコード:

ここで書いたのはコンポーネントなので、カメラを呼び出すトリガーイベントは親コンポーネントから渡されます。ページに直接書き込むこともできます。

<テンプレート>
  <div class="カメラボックス" style="幅: 900px;">
    <el-row :gutter="20">
      <el-col :span="12">
        <div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">カメラ</div>
        <!-- これはカメラで表示された画面です-->
        <ビデオ id="ビデオ" 幅="400" 高さ="300"></ビデオ>
        <div class="iCenter">
          <el-button type='primary' size='small' icon="el-icon-camera" @click="takePhone" style="margin-top: 10px;">写真を撮る</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">写真効果</div>
        <!-- クリックして写真を撮ると表示される画像画面です -->
        <canvas id='canvas' width='400' height='300' style="display: block;"></canvas>
        <el-button :loading="loadingbut" icon="el-icon-check" type='primary' size='small' @click="takePhoneUpfile" style="margin-top: 10px;">保存</el-button>
      </el-col>
    </el-row>
</div>
</テンプレート>
<スクリプト>
  「@/api/customer/animalinfo」から {putFileAttach} をインポートします。
  エクスポートデフォルト{
    小道具:{
      tackPhoto:{//親コンポーネントから渡される状態タイプ: ブール値、
        デフォルト:false
      }
    },
    データ() {
      戻る {
        読み込み中:false、
        preViewVisible: false、
        blobFile: null、
        キャンバス: null、
        ビデオ: null、
        メディアストリームトラック: '',
      }
    },
    時計:{
      タック写真:{
        即時: true、
        ハンドラー (newVal){//撮影ステータスを受け取った後、カメラの権限の取得を開始します。関数がコンポーネント内にある場合、以下の手順を独自のトリガーメソッドに直接記述できます。if (newVal) {
            var ビデオ = document.querySelector('ビデオ');
            var テキスト = document.getElementById('テキスト');
            // var mediaStreamTrack;
            
            // 互換性のあるコード window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
            
            navigator.mediaDevices が未定義の場合 {
            ナビゲーター.mediaDevices = {};
            }
            navigator.mediaDevices.getUserMedia が未定義の場合 {
            navigator.mediaDevices.getUserMedia = 関数(制約) {
              var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
              if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia はこのブラウザに実装されていません'));
              }
              新しいPromise(function(resolve,reject)を返す{
              getUserMedia.call(ナビゲーター、制約、解決、拒否);
              });
            }
            } 
            
            //カメラ呼び出し設定 var mediaOpts = {
            オーディオ: 偽、
            ビデオ: 本当、
            video: { facingMode: "environment"} // または "user"
            // ビデオ: { 幅: 1280、高さ: 720 }
            // video: { facingMode: { exact: "environment" } } // または "user"
            }

            that=this とします。
            navigator.mediaDevices.getUserMedia(mediaOpts).then(function(stream) {
            that.mediaStreamTrack = ストリーム;
            ビデオ = document.querySelector('ビデオ');
            if (ビデオ内の「srcObject」) {
              video.srcObject = ストリーム
            } それ以外 {
              video.src = window.URL && window.URL.createObjectURL(stream) || ストリーム
            }
            ビデオを再生します。
            }).catch(関数(エラー) {
              コンソール.log(エラー)
            });
          
        }
       },
        深い:本当
      },
    },
    マウント() {
      // カメラ this.video = document.getElementById('video');
      //キャンバス this.canvas = document.getElementById('canvas')
      
    },
    メソッド: {
      takePhone(){//クリックして写真を撮ります。let that = this;
        that.canvas.getContext('2d').drawImage(this.video, 0, 0, 400, 300);
        dataurl = that.canvas.toDataURL('image/jpeg') とします。
        that.blobFile = that.dataURLtoFile(dataurl, 'camera.jpg');
        that.preViewVisible = true
      },
      takePhoneUpfile(){//画像を保存 this.loadingbut=true;
        formData = new FormData() とします。
        formData.append('file', this.blobFile);//画像コンテンツ//画像をアップロード putFileAttach(formData).then(res=>{//バックエンドインターフェース this.loadingbut=false;
          this.$emit('picture',res.data.data);
          this.tackPhoto=false;
          this.canvas.getContext('2d').clearRect(0, 0, 400, 300);//キャンバスをクリア//カメラを閉じる this.mediaStreamTrack.getVideoTracks().forEach(function (track) {
            トラックを停止します。
           });
        },エラー=>{
          this.loadingbut=false;
          window.console.log(エラー);
        });
      },
    }
  }
</スクリプト>
<スタイル>
 .camera-box #キャンバス{
  境界線: 1px 実線 #DCDFE6;
  }
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue は PC カメラを呼び出してリアルタイムで写真を撮る機能を実装します
  • VueはPCカメラを呼び出して写真機能を実現します
  • Vueはローカルカメラを呼び出して写真機能を実現します
  • Vue2.0はカメラを呼び出して写真を撮る機能を実装し、exif.jsは写真アップロード機能を実装します。
  • Vueはカメラを呼び出して写真を撮り、ローカルに保存します

<<:  MySQL でタイムスタンプを日付に変換する例

>>:  docker compose の使い方の詳しい説明

推薦する

Dockerの匿名マウントと名前付きマウントの具体的な使用法

目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...

CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...

MySQL ビュー管理ビューの例の詳細説明 [追加、削除、変更、クエリ操作]

この記事では、例を使用して MySQL ビューの管理ビュー操作について説明します。ご参考までに、詳細...

iframe src 割り当ての問題 (サーバー側)

今日この問題に遭遇しました。サーバー側でiframeのsrc値を再割り当てし、iframeにIDを追...

JavaScript タイマーの詳細

目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

VueのID認証管理とテナント管理の詳細な説明

目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...

MySQLデュアルマスター(マスターマスター)アーキテクチャ構成ソリューション

企業では、データベースの高可用性は常に最優先事項です。多くの中小企業は、MySQL マスター スレー...

Mysql通信プロトコルの詳細な説明

1.Mysql接続方法MySQL 通信プロトコルを理解するには、まず MySQL サーバーへの接続に...

この記事では、CSSの2列レイアウトと3列レイアウトの具体的な使い方をまとめます。

序文大規模なフロントエンドの開発に伴い、UI フレームワークが次々と登場し、フロントエンド開発におけ...

Linuxのtimeコマンドの使い方の詳しい説明

1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...

cmd と python での MySQL の一般的な操作についての簡単な説明

環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...

DockerにMySQL 8.0をインストールする方法

環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....

スクロールバーのスタイルを設定するための CSS サンプルコード

スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...