如何使用JavaScript上传经过调整大小的图片并使用Python上传到服务器？

Question

我正在尝试将图像上传到服务器。在上传之前，我在JavaScript中修改了其大小，如下所示。我正在使用Python脚本来接收和上传文件：

let canvas;
let array_WH = new Array();
let percent = 50;
let img = new Image();

$(function() {

  function ff(height, width, percentage) {

    var newHeight = height * (percentage / 100);

    var newWidth = width * (percentage / 100);

    return [newWidth, newHeight];
  }

  $("#file_select").change(function(e) {

    var fileReader = new FileReader();

    fileReader.onload = function(e) {



      img.onload = function() {

        array_WH = ff(img.height, img.width, percent); //Pavel: changed order to correct

        console.log('old width: ' + img.width);
        console.log('new width: ' + array_WH[0]);

        width = array_WH[0];

        height = array_WH[1];

        if (canvas) return;

        canvas = document.createElement("canvas");

        canvas.width = width;

        canvas.height = height;

        canvas.getContext("2d").drawImage(this, 0, 0, width, height);

        // //Line added
        //var canvasData = canvas.toDataURL(); //Pavel: also for  png can be: toDataURL("image/png");
        var canvasData = canvas.toDataURL('image/jpeg', 0.5); //Pavel: sec param is quality from 0 to 1
        // //Line edited
        this.src = canvasData;
        // //Line added
        console.log(canvasData.length * 3 / 4, ' bytes');

        document.body.appendChild(this); //remove this if you don't want to show it

      }

      img.src = e.target.result;

    }

    fileReader.readAsDataURL(e.target.files[0]);

  });

});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<h1 class="logo">Upload Picture</h1>
<div id="upload_form_div">
  <form id="upload_form" method="POST" enctype="multipart/form-data" action="/Document/upload/">
    <input type="file" name="file" capture="camera" id="file_select" />
    <input type="submit" value="submit image">
  </form>
</div>

<div id="loading" style="display:none;">
  Uploading your picture...
</div>

在我的views.py中，我试图接收文件并将其移至上传文件夹：

@app.route("/Document/Upload/", methods=['POST'])
def getDocumentUpload():
    try:
        file            =   request.files['file'] if 'file' in request.files else None
        AttachmentFolder=   '/Attachment/image/'
        filename    = secure_filename(file.filename)
        strName     = filename.split(".")
        Link            = "%s.%s" %(filename, strName[-1])
        # Upload file to destination folder
        file.save(os.path.abspath(AttachmentFolder + Link))
    except Exception as e:
        raise e

但是，我在服务器端收到的图像是原始图像，而不是我想要的调整大小的图像。

从某些来源，我发现here和this using php server side script建议将图像转换为base64，并通过ajax发送到服务器并在服务器端对base64进行解码，但是有可能，但是我该如何使用base64对象使用python将图像保存到文件夹，而我没有使用ajax来上传文件，而是正常使用表单提交按钮。

我想到的一种方法是修改上载字段中的文件对象以获取调整大小的图像而不是原始图像，其余的将按原样工作，但是有可能吗？

请帮助我，如何从上面的JavaScript发送经过调整大小的图像，并使用python脚本在服务器端接收它？谢谢。