の保存は、ベース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（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); 
     } 

    }) 

Answer 2

クライアント側のすべてがファイル入力のonChangeイベントハンドラで設定されているため、誤った順序で起動されたり、意図したとおりに使用できない設定コードが起動する可能性があります。その後、onChangeイベントを再度呼び出すと、リソースはすでに配置されているか、または既に初期化されており、イメージは意図したとおりに表示されます。

これは単なる理論です。調査するには、イベントハンドラスコープから初期化を移動してみてください。