ajaxで何も送信されない

javascript と、php で、iphoneのインカメラの画像をサーバーに保存するプログラムを組んでいます。
ですが、~~ajaxでpostしてるのに、phpでは何も受け取っていません。
~~(追記2参照)
どこが原因か教えて下さい…

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5	<style>
6#img {
7	width: 400px;
8	height: 300px;
9}
10</style>
11	<title>テストページ</title>
12</head>
13<body>
14	<h2>Video</h2>
15	<video id="camera" autoplay ></video>
16	<button id="start">start</button>
17	<h2>Canvas</h2>
18	<canvas id="canvas"></canvas>
19	<h2>Img</h2>
20	<img id="img">
21<textarea id= "scr"></textarea>
22<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
23	<script type="text/javascript">
24$(function() {
25	const medias = {
26  audio: false,
27  video: {
28    facingMode: "user" // フロントカメラにアクセス
29  }
30};
31const video = document.getElementById("camera");
32const promise = navigator.mediaDevices.getUserMedia(medias);
33
34promise.then(successCallback)
35       .catch(errorCallback);
36
37
38function successCallback(stream) {
39  video.srcObject = stream;
40};
41
42function errorCallback(err) {
43  alert(err);
44};
45	$("#start").click(function() {
46		
47			var canvas = document.getElementById('canvas');
48			//canvasの描画モードを2sに
49			var ctx = canvas.getContext('2d');
50			var img = document.getElementById('img');
51
52			//videoの縦幅横幅を取得
53			var w = video.offsetWidth;
54			var h = video.offsetHeight;
55
56			//同じサイズをcanvasに指定
57			canvas.setAttribute("width", w);
58			canvas.setAttribute("height", h);
59
60			//canvasにコピー
61			ctx.drawImage(video, 0, 0, w, h);
62			//imgにpng形式で書き出し
63			img.src = canvas.toDataURL('image/png');
64
65		//var req = new XMLHttpRequest();
66var base64 = window.btoa(canvas.toDataURL('image/png'));
67var request = new XMLHttpRequest();
68request.open("post", "./up.php", true);
69request.onload = function (event) {
70  if (request.readyState === 4) {
71    if (request.status === 200) {
72      //document.getElementById("scr").textContent = con;
73document.getElementById("scr").textContent = request.responseText;
74// => "OK"
75    } else {
76      document.getElementById("scr").textContent = request.statusText; // => Error Message
77    }
78  }
79};
80request.onerror = function (event) {
81  document.getElementById("scr").textContent = event.type; // => "error"
82};
83var con = "'file'='" + base64 + "'";
84request.send(con);
85       
86//req.open('POST', 'up.php', true);
87//req.send('file=' + base64);
88
89	
90
91	});
92});
93</script>
94</body>
95</html>

php
1<?php
2print_r($_POST);
3//消さないで
4// 一時アップロード先ファイルパス
5$img = $_POST["file"];
6$img = str_replace('data:image/png;base64,', '', $img);
7$img = str_replace(' ', '+', $img);
8$fileData = base64_decode($img);
9
10// 正式保存先ファイルパス
11$file_save = './img/'.date("Y.m.d.H.i.s").'.png';
12
13// ファイル移動
14$result = @move_uploaded_file($fileData, $file_save);
15if ( $result === true ) {
16    echo "UPLOAD OK";
17} else {
18
19if(isset($img)){
20    echo "UPLOAD NG noimg";
21}else{
22echo "UPLOAD NG";
23}
24}
25

phpの出力

Array(
)
UPLOAD NG noimg

追記
Iphoneで作業しているため、デペロッパーツールが使えません。そのため、erudaというライブラリを使って調べた結果、up.phpにpost送信されているデータ量が45バイトしかありませんでした。
原因を教えていだだけたら嬉しいです。

追記2
setRequestHeader('Content-Type' ,
'application/x-www-form-urlencoded; charset=UTF-8')
の一文が抜けてました。
これを記入すると、postが認識されました。
また、phpのコードで、
!isset($img)
と、しなければならないところで、！が抜けていたため、まるでデータが送られてないと勘違いしておりました。すみません。
データはきちんと送られていたようです。

ですが、送られてきたデータを画像化して、アップロード出来ません。何もエラーは出ないです。

yambejp

2019/10/01 08:56

どこまで動いています？ canvasにデータは表示されますか？ canvasデータのbase64変換はされていますか？ post処理canvas以外なら成功しますか？

FKM

2019/10/01 09:36 編集

PHP文、いきなりprint_r($_POST)してますがそこでレスポンス返してしまいますよ。しかも配列に対する対処が何もしてないので、このままだとどのみちエラーになります。ブラウザのコンソールなどで、レスポンスOKのステータスコード200を確認できているか、そしてpost内のデータが入っているか追跡した方がいいと思います。

TeamPassionall

2019/10/01 11:08

>どこまで動いています？ POST送信されますが中身が何も無いです。その他は思い通りに動いてます。 >canvasにデータは表示されますか？されます。canvasとimg共にです。 >canvasデータのbase64変換はされていますか？変数conを表示させて、変換されているのを確認しました。 >post処理canvas以外なら成功しますか？これは普通のフォームのpostなら受け取れるかということですか？それなら受け取れます。

Lhankor_Mhy

2019/10/01 11:47 編集

MimeType はどうなっていますか？送信時のURLパラメタとbody部についてもご提示いただけますか？

TeamPassionall

2019/10/01 23:59

通信の詳細画像を追加しました。

FKM

2019/10/02 00:04

post_max_size > 転送しようとしている画像サイズになってますか？デフォルトでは2MBまでしか転送できないので、php.iniの設定を変える必要があるかも知れません。

Lhankor_Mhy

2019/10/02 00:24

リクエストのデータは見れないのですね……、わかりました。 PHP は詳しくないのですが、$_POST で受け取るデータはパラメータ形式のものではなかったかと思います。この送信は、file="..." という文字列が body に入りそうな気がするのですが、そのあたりはいかがでしょうか？

TeamPassionall

2019/10/02 00:26

post_max_size = 2048M になってますがこれで大丈夫ですか？

TeamPassionall

2019/10/02 00:48

>この送信は、file="..." という文字列が body に入りそうな気がするのですが、そのあたりはいかがでしょうか？そうしたいです。

Lhankor_Mhy

2019/10/02 00:51

> そうしたいです。たぶんそうなっています。なので、$_POST では受け取れないのでは、と書いています。この推測が正しいのかどうか、検証をご検討いただけますか？

Lhankor_Mhy

2019/10/02 02:45 編集

質問追記拝読。やはりそうでしたか、検証ありがとうございます。 --- var base64 = window.btoa(canvas.toDataURL('image/png')); とありますが、btoa は blob から base64 に変換する関数だと思うのですが、これで合っていますか？

Lhankor_Mhy

2019/10/02 03:03

あ、解決してたんですね。やはりこれも原因でしたか。ご解決されて何よりです。

行動規範の内容に同意します

回答2件

自己解決

move_upload_fileを以下のコードに置き換えたら成功しました

php
1imagesavealpha($img, TRUE); 
2$result = imagepng($img ,$file_save);

また、base64エンコードを重ねて行っていたのも原因でした。

ありがとうございました。

投稿2019/10/02 02:38

TeamPassionall

総合スコア80

yambejp

2019/10/02 02:45

ファイルはファイルとして送ったほうが何かとお得ですよ

TeamPassionall

2019/10/02 03:35

ありがとうございます。勉強になります。

行動規範の内容に同意します

どこで引っかかっているかわかりづらいのでcanvasを画像ファイルとして送る方法

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  /* canvas作成 */
4  const canvas = document.createElement( "canvas" ) ;
5  canvas.width=200;
6  canvas.height=200;
7  const context = canvas.getContext( "2d" ) ;
8  context.beginPath () ;
9  context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
10  context.fillStyle = "rgba(255,0,0,0.8)" ;
11  context.fill() ;
12  context.strokeStyle = "purple" ;
13  context.lineWidth = 8 ;
14  context.stroke() ;
15
16  /* blobに変換 */
17  const type = 'image/png';
18  const dataurl = canvas.toDataURL(type);
19  const bin = atob(dataurl.split(',')[1]);
20  const buffer = new Uint8Array(bin.length);
21  [].forEach.call(bin,(x,y)=>buffer[y]=bin.charCodeAt(y));
22  const blob = new Blob([buffer.buffer], {type});
23
24  /* fetchで送信 */
25  const body=new FormData();
26  body.append("myfile", blob,"test.png");
27  const url="up.php";
28  const method = "POST";
29  fetch(url, {method, body}).then(data=>data.text()).then(console.log)
30
31  /* 念の為、ajaxなら上記fetchの行をこうしてください
32  const xhr = new XMLHttpRequest();
33  xhr.open(method,url);
34  new Promise(resolve=>{
35    xhr.addEventListener("load" ,e=>resolve(e.target.response));
36  }).then(console.log);
37  xhr.send(body);
38  */ 
39});
40
41</script>