Сохранение URL-адреса данных из Javascript в PHP через Ajax

Для моего проекта мне нужно сохранить то, что отображается на холсте, в базу данных. Теперь я хорошо знаком с toDataURL() функция, и код ниже (по сути, просто тест) работает, отображая изображение дважды.

var canvas = document.getElementById('canvas');
var image = new Image();
image.src = "03Jun15.jpg";
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
canvas.getContext("2d").drawImage(image, 0, 0);

var newcanvas = document.getElementById('newcanvas');
var img = new Image();
img.src = canvas.toDataURL("image/png");
var imageData = canvas.toDataURL("image/png");
newcanvas.width = img.naturalWidth;
newcanvas.height = img.naturalHeight;
newcanvas.getContext("2d").drawImage(img, 0, 0);

Проблемы возникают, однако, когда я пытаюсь сохранить source к переменной сеанса через Ajax. Этот код ниже идет непосредственно после кода выше и ничего не отображает на testcanvas холст. То, что я хочу, это для $_SESSION['imageData'] чтобы установить URL-адрес данных, а затем изображение будет отображаться снова, но на этот раз с использованием переменной сеанса в качестве источника. Что я получаю для переменной сеанса, хотя это длинная строка, которая очень похожа на оригинал source переменная, но, видимо, не соответствует ей (я сделал быстрый оператор if, чтобы подтвердить это).

$.ajax({
url:"upload_image.php",
method:"POST",
data:{imageData:imageData}
});

var testcanvas = document.getElementById('testcanvas');
var newimage = new Image();
newimage.src = "<?php echo $_SESSION['imageData']; ?>";
var newsource = "<?php echo $_SESSION['imageData']; ?>";
testcanvas.width = newimage.naturalWidth;
testcanvas.height = newimage.naturalHeight;
testcanvas.getContext("2d").drawImage(newimage, 0, 0);

Вот что находится на upload_image.php:

session_start();

$_SESSION['imageData'] = $_POST['imageData'];

Честно говоря, я не знаю, что здесь теряется при переводе, так что, может, кто-нибудь поможет?

1

Решение

Нашел это для вас:
https://gist.github.com/peterschmidler/2410299

Следующий код сохраняет холст как png с ajax в php.

Javascript:

var canvasData = canvasElement.toDataURL("image/png");
$.ajax({
url:'save.php',
type:'POST',
data:{
data:canvasData
}
});

PHP:

$data = $_POST['data'];
$data = substr($data,strpos($data,",")+1);
$data = base64_decode($data);
$file = 'output.png';
file_put_contents($file, $data);
echo "Success!";
0

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

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