JavaScript — сохранить изображение холста на сервер
Я пытаюсь сохранить изображение холста на сервере. Я могу сохранить файл, но это всегда 0 байтов. Что не так с моим кодом?
<script>
function test(){
var canvas = document.getElementById("cvs");
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "upload.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
</script>
PHP:
<?php
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
Решение
Сначала вы должны быть уверены, что вы нарисовали на холсте после вы определили canvas переменная и до Вы создали dataURL
Во-вторых, кажется, что вы ищете img в этой строке php:
$img = $_POST['img'];
но в вашем javascript вы определяете это как imgBase64 в:
data: {
imgBase64: dataURL
}
наконец, вы должны добавить console.log(dataURL) после dataURL был создан, чтобы быть уверенным, что в нем что-то есть.
Другие решения
Других решений пока нет …