は、画像のサイズを変更し、ここで

Question

をJavascriptからPHPにアップロードする私のコードです：

var data = new FormData(); 
var imagesData = ""; 

     $("#filesToUpload").on("change", function(){ 
      var filesToUpload = document.getElementById("filesToUpload"); 
      for(var i = 0; i < filesToUpload.files.length; i++){ 
       var file = filesToUpload.files[i]; 
       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'); 

       canvas.width = 1600; 
       canvas.height = 900; 

       img.onload = function(){ 
        ctx.drawImage(img,0,0,canvas.width,canvas.height); 

        var dataURL = canvas.toDataURL("image/jpg"); 

        imagesData += dataURL + "~!!&&!!~"; 
       } 
      } 

     }) 

     $("#submit").on("click", function(){ 
      console.log(imagesData); 
      //data.append("imagesData", dataURL); 
      //var xhttp = new XMLHttpRequest; 
      //xhttp.open("POST", "test.php", true); 
      //   
      //xhttp.send(data); 
     }) 

私はPHPにアップロードする前に、JavaScriptで画像のサイズを変更したいです。私はすでにサイズを変更して一度に1つのファイルをアップロードすることができましたが、今は複数のファイルでこれを行いたいと思います。私の計画は、すべてのdataURLを1つの文字列に入れて、その文字列をPHPにポストすることです。次にそれらを配列に分割し、そこから続行します。今私は文字列を正しく一緒に置くかどうかを見るためにphpに送る前にコンソールに文字列を記録しようとしましたが、1つのdataURLと "〜!! & & !!〜" separator（私は文字列を配列に分割するために使用する）。

誰かが私の状況について何か光を当てることができますか？

Answer 1

私はbase64イメージを推奨しません、それは〜3倍大きくなります。いるFormDataを使用してブロブ代わり

const fd = new FormData 
 
const canvas = document.createElement('canvas') 
 
const MAX_WIDTH = 800 
 
const MAX_HEIGHT = 600 
 
const ctx = canvas.getContext('2d') 
 

 
function resize(img) { 
 
    ctx.drawImage(img, 0, 0) 
 
    
 
    let width = img.width 
 
    let height = img.height 
 
    // keep portration 
 
    if (width > height) { 
 
    if (width > MAX_WIDTH) { 
 
     height *= MAX_WIDTH/width 
 
     width = MAX_WIDTH 
 
    } 
 
    } else { 
 
    if (height > MAX_HEIGHT) { 
 
     width *= MAX_HEIGHT/height 
 
     height = MAX_HEIGHT 
 
    } 
 
    } 
 
    canvas.width = width 
 
    canvas.height = height 
 
    ctx.drawImage(img, 0, 0, width, height) 
 

 
    return new Promise(r => canvas.toBlob(r)) // use toBlob to get binaries (~3x smaller then base64) 
 
} 
 

 
$("#filesToUpload").on("change", async function() { 
 
    for (let file of this.files) { 
 
    try { 
 
     // Help from "Screw-FileReader" to turn a blob to an image 
 
     let blob = await file.image().then(resize) 
 
     fd.append('files', blob, file.name) 
 
    } catch (err) { 
 
     // not an image, or couldn't read 
 
    } 
 
    } 
 
    
 
    // fetch('./upload', {method: 'post', body: fd}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js"></script> 
 

 
<input type="file" id="filesToUpload" multiple>

を追加