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 の使い方の詳しい説明

推薦する

州と市町村の連携を簡単に実現するJavaScript

この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...

MySQLクエリが遅い場合の理由と解決策

Python プログラムを書き、Mysql ライブラリを集中的に操作したためです。データ量が多くない...

Vueスロットの使用の詳細

目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

VueでTypescriptの設定手順を使用する

目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...

uniapp プロジェクトをデスクトップ アプリケーションとしてパッケージ化する方法

Electronのインストール cnpm 電子をインストール -g electron-package...

MySQL 5.7.17無料インストール版のインストールと設定

MYSQLバージョン:MySQL Community Server 5.7.17、インストール不要版...

ウェブサイトのコンテンツの一部を傍受するための iframe を実装するためのアイデアとコード

コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...

mysql5.6 以前のデータベースで json をクエリする方法

MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...

Linux の daily_routine サンプルコードの詳細な説明

まずサンプルコードを見てみましょう: #/bin/bash cal 日付 -u echo "...

シェルスクリプトを使用して CentOS7 に python3.8 環境をインストールする (推奨)

ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...

MySQLが数十億のトラフィックをサポートする方法

目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...

適応型ウェブページを設計および作成する方法

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイス...

バランスの取れたデジタルスクロール効果を実現するJavaScript

目次1. 実施の背景2. 実装のアイデア3. 実施プロセス1. 実施の背景先週、ユーザーがタスクを完...