この記事の例では、コンピュータカメラを呼び出して写真機能を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...
よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...
この記事では、例を使用して MySQL ビューの管理ビュー操作について説明します。ご参考までに、詳細...
今日この問題に遭遇しました。サーバー側でiframeのsrc値を再割り当てし、iframeにIDを追...
目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...
少し前に、製品バージョンをテスト用にテスターに提出したのですが、テスト結果はまったく予想外のもの...
エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...
目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...
企業では、データベースの高可用性は常に最優先事項です。多くの中小企業は、MySQL マスター スレー...
1.Mysql接続方法MySQL 通信プロトコルを理解するには、まず MySQL サーバーへの接続に...
序文大規模なフロントエンドの開発に伴い、UI フレームワークが次々と登場し、フロントエンド開発におけ...
1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...
環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...
環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....
スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...