質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

ajaxで何も送信されない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,235

score 80

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
#img {
    width: 400px;
    height: 300px;
}
</style>
    <title>テストページ</title>
</head>
<body>
    <h2>Video</h2>
    <video id="camera" autoplay ></video>
    <button id="start">start</button>
    <h2>Canvas</h2>
    <canvas id="canvas"></canvas>
    <h2>Img</h2>
    <img id="img">
<textarea id= "scr"></textarea>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
$(function() {
    const medias = {
  audio: false,
  video: {
    facingMode: "user" // フロントカメラにアクセス
  }
};
const video = document.getElementById("camera");
const promise = navigator.mediaDevices.getUserMedia(medias);

promise.then(successCallback)
       .catch(errorCallback);


function successCallback(stream) {
  video.srcObject = stream;
};

function errorCallback(err) {
  alert(err);
};
    $("#start").click(function() {

            var canvas = document.getElementById('canvas');
            //canvasの描画モードを2sに
            var ctx = canvas.getContext('2d');
            var img = document.getElementById('img');

            //videoの縦幅横幅を取得
            var w = video.offsetWidth;
            var h = video.offsetHeight;

            //同じサイズをcanvasに指定
            canvas.setAttribute("width", w);
            canvas.setAttribute("height", h);

            //canvasにコピー
            ctx.drawImage(video, 0, 0, w, h);
            //imgにpng形式で書き出し
            img.src = canvas.toDataURL('image/png');

        //var req = new XMLHttpRequest();
var base64 = window.btoa(canvas.toDataURL('image/png'));
var request = new XMLHttpRequest();
request.open("post", "./up.php", true);
request.onload = function (event) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      //document.getElementById("scr").textContent = con;
document.getElementById("scr").textContent = request.responseText;
// => "OK"
    } else {
      document.getElementById("scr").textContent = request.statusText; // => Error Message
    }
  }
};
request.onerror = function (event) {
  document.getElementById("scr").textContent = event.type; // => "error"
};
var con = "'file'='" + base64 + "'";
request.send(con);

//req.open('POST', 'up.php', true);
//req.send('file=' + base64);



    });
});
</script>
</body>
</html>
<?php
print_r($_POST);
//消さないで
// 一時アップロード先ファイルパス
$img = $_POST["file"];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);

// 正式保存先ファイルパス
$file_save = './img/'.date("Y.m.d.H.i.s").'.png';

// ファイル移動
$result = @move_uploaded_file($fileData, $file_save);
if ( $result === true ) {
    echo "UPLOAD OK";
} else {

if(isset($img)){
    echo "UPLOAD NG noimg";
}else{
echo "UPLOAD NG";
}
}

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)
と、しなければならないところで、!が抜けていたため、まるでデータが送られてないと勘違いしておりました。すみません。
データはきちんと送られていたようです。

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

postの詳細

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/10/02 09:51

    > そうしたいです。

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

    キャンセル

  • Lhankor_Mhy

    2019/10/02 11:45 編集

    質問追記拝読。
    やはりそうでしたか、検証ありがとうございます。

    ---

    var base64 = window.btoa(canvas.toDataURL('image/png'));

    とありますが、btoa は blob から base64 に変換する関数だと思うのですが、これで合っていますか?

    キャンセル

  • Lhankor_Mhy

    2019/10/02 12:03

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

    キャンセル

回答 2

check解決した方法

0

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

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


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/02 11:45

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

    キャンセル

  • 2019/10/02 12:35

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

    キャンセル

0

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

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  /* canvas作成 */
  const canvas = document.createElement( "canvas" ) ;
  canvas.width=200;
  canvas.height=200;
  const context = canvas.getContext( "2d" ) ;
  context.beginPath () ;
  context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
  context.fillStyle = "rgba(255,0,0,0.8)" ;
  context.fill() ;
  context.strokeStyle = "purple" ;
  context.lineWidth = 8 ;
  context.stroke() ;

  /* blobに変換 */
  const type = 'image/png';
  const dataurl = canvas.toDataURL(type);
  const bin = atob(dataurl.split(',')[1]);
  const buffer = new Uint8Array(bin.length);
  [].forEach.call(bin,(x,y)=>buffer[y]=bin.charCodeAt(y));
  const blob = new Blob([buffer.buffer], {type});

  /* fetchで送信 */
  const body=new FormData();
  body.append("myfile", blob,"test.png");
  const url="up.php";
  const method = "POST";
  fetch(url, {method, body}).then(data=>data.text()).then(console.log)

  /* 念の為、ajaxなら上記fetchの行をこうしてください
  const xhr = new XMLHttpRequest();
  xhr.open(method,url);
  new Promise(resolve=>{
    xhr.addEventListener("load" ,e=>resolve(e.target.response));
  }).then(console.log);
  xhr.send(body);
  */ 
});

</script>
  • up.php
<?PHP
print_r($_FILES);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る