Javascript 在压缩图像和上传时，我的代码中有什么问题？

我想要实现的是： 我想压缩上传的图像并将其发送到服务器进行上传

我面临什么问题？ 一切正常，但图像未压缩。图像的大小与以前相同

加价

<form action="./imageUpload.php" method="POST" enctype="multipart/form-data" onsubmit="formD(el)">
    <input id="file" type="file" name="file">
    <input type="submit" value="submit" name="submit">
</form>
<div id="dis"></div>

PHP变量转储（$\u文件）

---

JPG图像已经被压缩了。但是我想在上传之前使用canvas进一步压缩它。正如这个家伙所说：你不能压缩压缩的数据，这个概念让@Pointy毫无意义地指出，JPG已经被压缩了。。。如果你的目标是缩小尺寸，你可以尝试降低质量，试试

'image/jpeg'，0.5

或其他一些已经压缩过的较小尺寸的图像。是的，但我想在上传之前使用画布对其进行进一步压缩。正如这个家伙所说：你不能压缩压缩的数据，这个概念让@Pointy毫无意义地指出，JPG已经被压缩了。。。如果您的目标只是缩小尺寸，您可以尝试降低质量，可以尝试

'image/jpeg'，0.5

或更小的版本

document.getElementById("file").addEventListener("change", function (event) {
        compress(event);
    });

function compress(e) {
    const width = 100;
    const height = 100;
    const fileName = e.target.files[0].name;
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = event => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
                let elem = document.createElement('canvas');
                elem.width = width;
                elem.height = height;
                let ctx = elem.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);
                ctx.canvas.toBlob((blob) => {
                    let file = new File([blob], fileName, {
                        type: 'image/jpeg',
                        lastModified: Date.now()
                    });
                }, 'image/jpeg', 1);
            },
            reader.onerror = error => console.log(error);
    };
}

    array (size=5)
      'name' => string 'fruit.jpg' (length=9)
      'type' => string 'image/jpeg' (length=10)
      'tmp_name' => string 'C:\wamp64\tmp\php2C53.tmp' (length=25)
      'error' => int 0
      'size' => int 135454 //This is the actual size so compression is not happening