在提交服务器之前，图像压缩

Question

我试图在上传到服务器之前从客户端压缩图像。 我的目标是在文件输入中捕获图像，压缩它，然后在另一个文件输入字段（ImageInput）中添加压缩图像作为值，该值将在帖子中提交给服务器。

图像被压缩，但是ImageInput输入没有获得图像的值。它发布一个空图像

    <script>
     function process() {
    const file = document.querySelector("#upload").files[0];

    if (!file) return;

    const reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function (event) {
        const imgElement = document.createElement("img");
        imgElement.src = event.target.result;

        imgElement.onload = function (e) {
            const canvas = document.createElement("canvas");
            const MAX_WIDTH = 400;

            const scaleSize = MAX_WIDTH / e.target.width;
            canvas.width = MAX_WIDTH;
            canvas.height = e.target.height * scaleSize;

            const ctx = canvas.getContext("2d");

            ctx.drawImage(e.target, 0, 0, canvas.width, canvas.height);

            const srcEncoded = ctx.canvas.toDataURL(e.target, "image/jpeg");

            // you can send srcEncoded to the server
            alert(srcEncoded)
            document.querySelector("#output").src = srcEncoded;

            // my file input which I want to give a value of the compressed image
            document.getElementById('ImageInput').value = srcEncoded;


           };
        };
      }
   </script>