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)
と、しなければならないところで、!が抜けていたため、まるでデータが送られてないと勘違いしておりました。すみません。
データはきちんと送られていたようです。
ですが、送られてきたデータを画像化して、アップロード 出来ません。何もエラーは出ないです。
回答2件
あなたの回答
tips
プレビュー