VueはPCで写真をアップロードする機能を実現

VueはPCで写真をアップロードする機能を実現

この記事の例では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue2.0はカメラを呼び出して写真を撮る機能を実装し、exif.jsは写真アップロード機能を実装します。
  • Vue.js 2.0 モバイル端末の写真圧縮画像プレビューとアップロードの例
  • Vue2は写真の回転問題を解決するために、モバイルアップロード、プレビュー、および画像の圧縮を実装しています。
  • Vuejs 開発コンポーネント共有 H5 画像のアップロード、圧縮、写真の回転問題の処理
  • Vue.js 2.0 モバイル端末の写真圧縮画像アップロードプレビュー機能
  • VueはPCカメラを呼び出して写真機能を実現します
  • Vueはコンピュータカメラを呼び出して写真機能を実現します
  • Vueはローカルカメラを呼び出して写真機能を実現します

<<:  MySQLはtruncateコマンドを使用してデータベース内のすべてのテーブルを素早くクリアします

>>:  Alibaba Cloud Server Linux システムは Tomcat を構築して Web プロジェクトを展開します

推薦する

easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル

この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...

Vue から React への変換入門ガイド

目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...

操作タイムアウトがないときにMySQLサーバーがアクティブに切断される問題を解決します

MySQL サービスを使用する場合、通常の状況では、MySQL のタイムアウト設定は 8 時間 (2...

tinyMCEの使い方と体験の詳細な説明

tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...

jsでの位置計算を徹底的に理解するのに役立つ記事

目次導入スクロール要素.スクロール()要素.scrollHeight/scrollWidth要素.s...

WindowsでcmdからDOSウィンドウに入り、MySQLデータベースにアクセスします。

1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...

MySQL のインデックスとビューの使用方法と違いの詳細な説明

序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...

WeChatアプレットが9マスグリッド効果を実現

この記事では、WeChatアプレットの9マスグリッド効果を実現するための具体的なコードを参考までに紹...

効果的なウェブフォームのための 8 つのルール

ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...

MySQL コマンドラインでよく使われる 18 個のコマンド

日常的なウェブサイトの保守と管理では、多くの SQL ステートメントが使用されます。熟練して使用する...

Vue で Excel インポート機能を実装する詳細な手順

1. フロントエンド主導の実装手順最初のステップは、ページのインポートボタンをクリックしてExcel...

MySQLの基礎知識学習ノート

データベースを表示show databases;データベースを作成するDATABASE データベース...

TypeScriptにおけるunknownとanyの違いについて詳しく説明します

目次序文1. 不明 vs 任意2. 未知とあらゆるもののメンタルモデル3. まとめ要約する序文any...

MySQLはbinlogを通じてデータを復元する

目次MySQL ログファイルバイナリログBinlogログがオンになっていますログ記録を有効にする方法...

MySQLでレコードを変更する場合、更新操作フィールド = フィールド + 文字列

シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...