Сохранение базы 64 изображение создает пустое изображение в PHP

Question

Во-первых, вот мой код клиента сторона:

$("#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, чтобы затем сохранить его как изображение.

Когда я сохраняю изображение, он создает пустое изображение на моем сервере. НО, когда я сохраняю другое изображение без обновления страницы, он сохраняет предыдущее изображение в своем месте и на этот раз правильно. Это вне меня, может кто-то пролить некоторый свет?

Answer 1

Вы отправляете изображение перед его загрузкой. Ваша функция img.onload выполняется после xhttp.send (данных). Когда вы загружаете еще один раз, он получает предыдущее изображение, которое уже загружено.

Попробуйте следующее:

$("#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); 
     } 

    }) 

Answer 2

Возможность иметь в виду: поскольку все на стороне клиента настроено в обработчике события onChange файла, может быть, какой-то код установки запускается в неправильном порядке и/или не вовремя, чтобы использоваться по назначению? Затем при повторном вызове события onChange ресурсы уже установлены/уже инициализированы, и изображение отображается по назначению.

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