Блог

Сначала вот мой код на стороне клиента:

 $("#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.resu<
            }
            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.resu<
        }
        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, ресурсы уже на месте / уже инициализированы, и изображение отображается по назначению.

Это всего лишь теория. Чтобы исследовать, попробуйте переместить инициализации из области обработчика событий.