この記事の例では、PC上で写真アップロード機能を実現するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF8"> </head> <本文> <div id="コンテンツホルダー"> <video id="video" width="320" height="320" 自動再生></video> <button id="camera">写真を撮る</button> <キャンバスid="キャンバス" 幅="320" 高さ="320"> </キャンバス> </div> <script type="text/javascript"> var ビデオ = document.getElementById('ビデオ'); varトラック; var カメラ = document.getElementById('カメラ'); window.addEventListener("DOMContentLoaded", 関数(){ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; (ナビゲーターのユーザーメディアを取得する){ ナビゲーター.getUserMedia({video:true}, 関数(ストリーム) { track = stream.getTracks()[0]; // これを使用してカメラをオフにします。video.src = window.URL.createObjectURL(stream); ビデオ.onloadedmetadata = 関数(e) { ビデオを再生します。 }; }, 関数(エラー) { アラート(err.name); } ); } }); Camera.onclick = 関数(){ var キャンバス = document.getElementById('キャンバス'); var context2D = canvas.getContext("2d"); context2D.fillStyle = "#ffffff"; context2D.fillRect(0, 0, 320, 320); context2D.drawImage(ビデオ、0、0、320、320); var image_code = canvas.toDataURL("image/png"); // バックエンドに渡される Base64 コンソール.log(画像コード) if (null != トラック) { track.stop(); //カメラを閉じる} }; </スクリプト> </本文> </html> 上記のコードは、Webページが開かれたときにカメラを呼び出します。 バックエンドに送信されるコードはbase64コードです 以下はVueを使用してバックグラウンドに渡したコードです var パラメータ = { ファイル:image_code2 } var a = JSON.stringify(param); アップロード画像(a)。その後((res) => { コンソールログ(res); }); 以下は私のPHPバックグラウンド受信コードです パブリック関数 uploadImg($name="img",$path='img'){ $_POST = json_decode(file_get_contents('php://input'),true); $パラメータ = $_POST; $image_code = $param['ファイル']; $img = str_replace('data:image/png;base64,', '', $image_code); //base64 コードを取得します $img = str_replace(' ', '+', $img); $data = base64_decode($img); $name = time().".png"; $savepath = "./upload/".$name; //画像が保存される場所 file_put_contents($savepath,$data); //コンテンツをファイルに書き込みます $this->ajaxReturn(array('status'=>'0','data'=>$savepath)); } クリックしてカメラを開くようにしたい場合は、カメラからコードを取得してメソッドに組み込むことができます。 var カメラ = document.getElementById('カメラ'); window.addEventListener("DOMContentLoaded", 関数(){ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; }); 関数デモ(){ (ナビゲーターのユーザーメディアを取得する){ ナビゲーター.getUserMedia({video:true}, 関数(ストリーム) { track = stream.getTracks()[0]; // これを使用してカメラをオフにします。video.src = window.URL.createObjectURL(stream); ビデオ.onloadedmetadata = 関数(e) { ビデオを再生します。 }; }, 関数(エラー) { アラート(err.name); } ); } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLはtruncateコマンドを使用してデータベース内のすべてのテーブルを素早くクリアします
>>: Alibaba Cloud Server Linux システムは Tomcat を構築して Web プロジェクトを展開します
この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...
目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...
MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...
tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...
目次導入スクロール要素.スクロール()要素.scrollHeight/scrollWidth要素.s...
1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...
序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...
この記事では、WeChatアプレットの9マスグリッド効果を実現するための具体的なコードを参考までに紹...
ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...
日常的なウェブサイトの保守と管理では、多くの SQL ステートメントが使用されます。熟練して使用する...
1. フロントエンド主導の実装手順最初のステップは、ページのインポートボタンをクリックしてExcel...
データベースを表示show databases;データベースを作成するDATABASE データベース...
目次序文1. 不明 vs 任意2. 未知とあらゆるもののメンタルモデル3. まとめ要約する序文any...
目次MySQL ログファイルバイナリログBinlogログがオンになっていますログ記録を有効にする方法...
シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...