この記事の例では、コンピュータカメラを呼び出して写真機能を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...
Python プログラムを書き、Mysql ライブラリを集中的に操作したためです。データ量が多くない...
目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...
<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...
目次1. TypeScriptが古いVueプロジェクトに導入されるVue+Typescript プロ...
Linux 仮想マシン: VMware + Ubuntu 16.04.4 Windows ネイティブ...
Electronのインストール cnpm 電子をインストール -g electron-package...
MYSQLバージョン:MySQL Community Server 5.7.17、インストール不要版...
コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...
MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...
まずサンプルコードを見てみましょう: #/bin/bash cal 日付 -u echo "...
ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...
目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...
3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイス...
目次1. 実施の背景2. 実装のアイデア3. 実施プロセス1. 実施の背景先週、ユーザーがタスクを完...