ajax не будет отправлять данные холста в переполнение стека

Question

ajax не будет отправлять данные холста в переполнение стека

Это код в моем JS

(function(){
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
photo = document.getElementById('photo'),
vendorUrl = window.URL || window.webkitURL;
datas = canvas.toDataURL('images/png');

navigator.getMedia =    navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;

navigator.getMedia({
video: true,
audio: false
}, function(stream){
video.src = vendorUrl.createObjectURL(stream);
video.play();
}, function(error){

});

document.getElementById('capture').addEventListener('click',function(){
context.drawImage(video, 0, 0, 400, 300);
photo.setAttribute('src', canvas.toDataURL('images/png'));datas = canvas.toDataURL('images/png');});
var canvasData = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'webcam.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);})();

Это код php для получения данных

<?php

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
echo "true";
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);

// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);

//echo "unencodedData".$unencodedData;

// Save file. This example uses a hard coded filename for testing,
// but a real application can specify filename in POST variable
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>

<head>
<meta charset="UTF-8">
<Title>Document</title>

<link rel="stylesheet" href="css/main.css">
</head>
<body>

<div class="booth">
<video id = "video" width="400" height="300"></video>
<a href="#" id ="capture" class="booth-capture-button">Snap Shot</a>
<canvas id="canvas" width="400" height="300"></canvas>
<img id ="photo" name = "photo" src="images/events/default.png" alt="Photo of you">
</div>

<script src="js/photo.js"></script>
</body>

<?php?>

Приложение намерено сделать снимок пользователя и сохранить фотографию с помощью JavaScript. Я пытаюсь найти способ отправить данные обратно в php и использовать их для сохранения в базе данных. Я понимаю, что это сохраняется в base64 кодирования. Я пробовал разные методы Ajax, в том числе тот, который я сохранил, но данные, как правило, не отправляют никаких данных в папку php.

Заранее благодарю.

0

ajax php png send

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я просто предлагаю вам проверить некоторые из ваших пунктов кода:

Тип содержимого формы. Для загрузки файлов необходимо использовать «multipart / form-data»

ajax.setRequestHeader (‘Content-Type’, ‘multipart / form-data’);
Вы можете использовать класс FormData в JS для создания данных формы перед отправкой:
https://developer.mozilla.org/en/docs/Web/API/FormData/append
Холст-функция «toDataURL» не имеет типов пантомимы «images / png». Просто «изображение / PNG»

0