HTML,PHPを使った画像の保存

pcのカメラで写真を撮り、保存ボタンを押したら画像が保存され2,3...枚目の写真は最初に撮った写真に上書きしたいです
名前test001.php

php
1
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width">
7  <title>getUserMedia-Demo</title>
8</head>
9<body>
10
11    <!-- カメラ映像が描画されます。 -->
12    <video id="video_area" style="background-color: #000" autoplay></video>
13
14    <!-- 押下するとカメラ映像描画を開始します。 -->
15    <!--<button id="start_btn">映像表示開始</button>-->
16
17    <!-- 押下するとカメラ映像から静止画をキャプチャします。 -->
18    <button onclick="copyFrame()" >写真撮影</button>
19
20    
21   <button onclick="saveCanvas('jpeg');">保存</button>
22
23
24
25    <!-- キャプチャした静止画が描画されます。 -->
26    <canvas id="capture_image"></canvas>
27	<img id="img" /><br><br>
28	
29	
30	<script src="../web%20cam%20v3/jquery.min.js"></script>
31	
32</body>
33<script>
34
35
36
37
38    // getUserMedia が使えないときは、『getUserMedia()が利用できないブラウザです！』と言ってね。
39    if (typeof navigator.mediaDevices.getUserMedia !== 'function') {
40        const err = new Error('getUserMedia()が利用できないブラウザです！');
41        alert(`${err.name} ${err.message}`);
42        throw err;
43    }
44
45    // 操作する画面エレメント変数定義します。
46    const $start = document.getElementById('start_btn');   // スタートボタン
47    const $video = document.getElementById('video_area');  // 映像表示エリア
48	
49	
50	
51	navigator.mediaDevices.getUserMedia({ video: true, audio: false })
52        .then(stream => $video.srcObject = stream)
53        .catch(err => alert(`${err.name} ${err.message}`));
54        
55        
56    /* 「スタートボタン」を押下したら、getUserMedia を使って映像を「映像表示エリア」に表示してね。
57    $start.addEventListener('click', () => {
58        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
59        .then(stream => $video.srcObject = stream)
60        .catch(err => alert(`${err.name} ${err.message}`));
61    }, false);*/
62
63
64    // 「静止画取得」ボタンが押されたら「<canvas id="capture_image">」に映像のコマ画像を表示します。
65    function copyFrame() {
66
67        var canvas_capture_image = document.getElementById('capture_image');//canvas_capture_image --canvas
68        var cci = canvas_capture_image.getContext('2d');//canvas_capture_image --canvas
69        var va = document.getElementById('video_area');
70
71        canvas_capture_image.width  = va.videoWidth;//canvas_capture_image--canvas
72        canvas_capture_image.height = va.videoHeight;//canvas_capture_image--canvas
73        cci.drawImage(va, 0, 0);  // canvasに『「静止画取得」ボタン』押下時点の画像を描画。
74        
75         var img = document.getElementById("img");//付け加えた
76    }
77    
78    
79    
80    
81    
82    
83    
84    
85     var canvas_capture_image = document.getElementById('capture_image');
86        var cci = canvas_capture_image.getContext('2d');
87        var va = document.getElementById('video_area');
88
89        canvas_capture_image.width  = va.videoWidth;
90        canvas_capture_image.height = va.videoHeight;
91        cci.drawImage(va, 0, 0);  // canvasに『「静止画取得」ボタン』押下時点の画像を描画。
92        
93        var img = document.getElementById("img");
94
95    // canvas上のイメージを保存
96    /*
97    function saveCanvas(saveType){
98        var imageType = "image/png";
99        var fileName = "sample.png";
100        if(saveType === "jpeg"){
101            imageType = "image/jpeg";
102            fileName = "sample.jpg";
103        }
104        var canvas = document.getElementById("capture_image");
105        // base64エンコードされたデータを取得 「data:image/png;base64,iVBORw0k～」
106        var base64 = canvas.toDataURL(imageType);
107        // base64データをblobに変換
108        var blob = Base64toBlob(base64);
109        // blobデータをa要素を使ってダウンロード
110        saveBlob(blob, fileName);
111    }
112
113    // Base64データをBlobデータに変換
114    function Base64toBlob(base64)
115    {
116        // カンマで分割して以下のようにデータを分ける
117        // tmp[0] : データ形式（data:image/png;base64）
118        // tmp[1] : base64データ（iVBORw0k～）
119        var tmp = base64.split(',');
120        // base64データの文字列をデコード
121        var data = atob(tmp[1]);
122        // tmp[0]の文字列（data:image/png;base64）からコンテンツタイプ（image/png）部分を取得
123    	var mime = tmp[0].split(':')[1].split(';')[0];
124        //  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
125    	var buf = new Uint8Array(data.length);
126    	for (var i = 0; i < data.length; i++) {
127            buf[i] = data.charCodeAt(i);
128        }
129        // blobデータを作成
130    	var blob = new Blob([buf], { type: mime });
131        return blob;
132    }
133
134    // 画像のダウンロード
135    function saveBlob(blob, fileName)
136    {
137        var url = (window.URL || window.webkitURL);
138        // ダウンロード用のURL作成
139        var dataUrl = url.createObjectURL(blob);
140        // イベント作成
141        var event = document.createEvent("MouseEvents");
142        event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
143        // a要素を作成
144        var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
145        // ダウンロード用のURLセット
146        a.href = dataUrl;
147        // ファイル名セット
148        a.download = fileName;
149        // イベントの発火
150        a.dispatchEvent(event);
151    }*/
152    
153      // body部パラメーター koko!!!!!!!!!!!!!!!!!!
154    	var data = {};
155    	// Canvasのデータをbase64でエンコードした文字列を取得
156    		//var canvasData = $('capture_image').get(0).toDataURL();
157		var canvasData = canvas_capture_image.toDataURL();
158
159    	// 不要な情報を取り除く
160    	canvasData = canvasData.replace(/^data:image/png;base64,/, '');
161	
162    	data.image = canvasData;
163
164    
165    
166    $.ajax({
167    	    //url: 'tobu.php',
168    	    //url:'https://frenchkiss-kofu-ohara.ssl-lolipop.jp/face/tobu.php',
169    	    url:'tobu.php',
170    	    type: 'POST',
171    	    //processData: false,
172			//contentType: false,
173    	    success: function() {
174    	        // 成功時の処理
175    	        console.log("送信成功");
176    	        console.log(data);
177    	    },
178    	    error(jqXHR, textStatus, errorThrown) {
179    	        // 失敗時の処理
180    	        
181				console.log("ajax通信に失敗しました");
182					console.log(jqXHR.responseText);
183                    console.log("jqXHR          : " + jqXHR.status); // HTTPステータスが取得
184                    console.log("textStatus     : " + textStatus);    // タイムアウト、パースエラー
185                    console.log("errorThrown    : " + errorThrown.message); // 例外情報
186                    //console.log("URL            : " + url);	
187    	    
188    	    		console.error("message");
189    	       
190    	    },
191    	    data: data,
192        	dataType: 'text'    
193    		});        
194    	
195
196    
197    
198</script>
199
200</html>
201

名前tobu.php

php
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3
4<head>
5<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6<title>無題 1</title>
7</head>
8
9<body>
10
11<?php
12
13
14	
15    $imageData = $_POST['image'];
16    $filename = 'example.jpg';
17    $fp = fopen($filename,'w');
18    fwrite($fp,base64_decode($imageData));
19    fclose($fp);
20    
21?>
22
23</body>
24
25</html>
26