ajax — сохранение базового изображения 64 создает пустое изображение в переполнении стека
Сначала вот мой клиентский код:
$("#fileToUpload").on("change", function(){
var filesToUpload = document.getElementById("fileToUpload");
var file = filesToUpload.files[0];
var img = new Image(600,400);
var reader = new FileReader();
reader.onload = function(e){
img.src = e.target.result;
}
reader.readAsDataURL(file);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
img.onload = function(){
canvas.width = 600;
canvas.height = 400;
ctx.drawImage(img,0,0,canvas.width,canvas.height);
}
var dataURL = canvas.toDataURL("image/jpg");
var data = new FormData();
data.append("image", dataURL);
var xhttp = new XMLHttpRequest;
xhttp.open("POST", "test.php", true);
xhttp.send(data);
})
А вот и мой php-код:
$imageArr = explode(',', $_POST['image']);
$image = base64_decode($imageArr[1]);
file_put_contents('image.jpg',$image);
Я изменяю размер изображения на стороне клиента и затем отправляю его как URL-адрес данных в php, чтобы затем сохранить как изображение.
Когда я сохраняю изображение, оно создает пустое изображение на моем сервере. НО, когда я сохраняю другое изображение без обновления страницы, оно сохраняет предыдущее изображение на своем месте и на этот раз правильно. Это за мной, кто-то может пролить свет?
Решение
Вы отправляете изображение до его загрузки. Ваша функция img.onload выполняется после xhttp.send (data). Когда вы загружаете еще раз, он получает предыдущее изображение, которое уже загружено.
Попробуйте следующее:
$("#fileToUpload").on("change", function(){
var filesToUpload = document.getElementById("fileToUpload");
var file = filesToUpload.files[0];
var img = new Image(600,400);
var reader = new FileReader();
reader.onload = function(e){
img.src = e.target.result;
}
reader.readAsDataURL(file);
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 400;
var ctx = canvas.getContext('2d');
img.onload = function(){
ctx.drawImage(img,0,0,canvas.width,canvas.height);
var dataURL = canvas.toDataURL("image/jpg");
var data = new FormData();
data.append("image", dataURL);
var xhttp = new XMLHttpRequest;
xhttp.open("POST", "test.php", true);
xhttp.send(data);
}
})
Другие решения
Возможность иметь в виду: поскольку все на стороне клиента настраивается в обработчике события onChange для ввода файлов, может быть, какой-то код установки запускается в неправильном порядке и / или не вовремя используется для использования по назначению? Затем при повторном вызове события onChange ресурсы уже находятся на месте / уже инициализированы, и изображение отображается в соответствии с назначением.
Это просто теория. Чтобы исследовать, попробуйте переместить инициализации из области действия обработчика событий.