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 を応援していただければ幸いです。

以下もご興味があるかもしれません: