如何使用 javascript 调整多个图像的大小并使用 ajax 保存在 mysql 中

Question

这是我用来在 javascript 中调整图像大小和压缩图像的代码，它工作正常，并且还通过 ajax 在 mysql 中发送了一张图像，但问题是我想在数据库中发送四张图像还有一些额外的字段。现在我想要 imgCompressResize 函数只传递图像参数和 return 压缩和调整图像大小以便我可以根据需要保存。

<input type="file" name="img1" id="file1" accept="image/*">

document.getElementById("file1").addEventListener("change", function (e) {
    var file = imgCompressResize(e);
    var data = new FormData();
    data.append('file1', file);
    $.ajax({
        url:"page.php",
        type:"POST",
        data:data,
        cache: false,
        contentType: false,
        processData: false,
        success:function (data) {
            alert(data);
        }
    });

});

function imgCompressResize(e) {
            const width = 500;
            const height = 600;
            var file;
            const fileName = e.target.files[0].name;
            console.log(fileName);
            const reader = new FileReader();
            reader.readAsDataURL(e.target.files[0]);
            reader.onload = event => {
                const img = new Image();
                img.src = event.target.result;
                img.onload = () => {
                    const elem = document.createElement('canvas');
                    elem.width = width;
                    elem.height = height;
                    const ctx = elem.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);
                    ctx.canvas.toBlob((blob) => {
                    file = new File([blob], fileName, {
                            type: 'image/jpeg',
                            lastModified: Date.now()
                        });
                        return file;
                        // if i call here ajax() function that working for one image but i don't need 
                        // call here ajax().
                    }, 'image/jpeg', .7);
                },
                reader.onerror = error => console.log(error);
            }
        }

Answer 1

由于 onload 是异步的，所以我不会重写整个内容，只是简单地向您概述如何使用 promises。

document.getElementById("file1").addEventListener("change", function(e) {
  const filesArray = Array.from(this.files);
  // map array of each resize promise 
  const filePromises = filesArray.map(imgCompressResize);
  
  var data = new FormData();
  // when all resolved append to FormData
  Promise.all(filePromises).then(newFiles =>{
     newFiles.forEach(f=> data.append('files[]', f) 
  });
  // append other fields needed    
  //then  do ajax    
})

function imgCompressResize(file) {
                         // ^^ file instead of event
  // return promise
  return new Promise((resolve, reject) => {
    //...
    //const fileName = e.target.files[0].name;
    const fileName = file.name;
    const reader = new FileReader();
    reader.readAsDataURL(file);    
    reader.onload = event => {
      //...
      img.onload = () => {
        //....
        const newFile = new File([blob], fileName, {...);
        // resolve the promise
        resolve(newFile);
      });
    });
      
  });

   reader.onerror = reject
}

如何使用 javascript 调整多个图像的大小并使用 ajax 保存在 mysql 中

how multiple image resize by using javascript and save in mysql by using ajax

javascript

compression

ajax

resize

image