将canvas作为图像发送到服务器

Question

尝试裁剪图像并将画布作为图像发送到服务器，但原始图像将发送到服务器。 使用的代码如下：

<script type="text/javascript">

    var crop_max_width = 400;
    var crop_max_height = 400;
    var jcrop_api;
    var canvas;
    var context;
    var image;

    var prefsize;

    $("#file").change(function() {
      console.log("1");
      loadImage(this);
    });

    function loadImage(input) {
      if (input.files && input.files[0]) {
        console.log("2");
        var reader = new FileReader();
        canvas = null;
        reader.onload = function(e) {
            console.log("3");
          image = new Image();
          image.onload = validateImage;
          /* $("image").on("load",function() {image.src = e.target.result;}); */
          image.src = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
      }
    }

    function dataURLtoBlob(dataURL) {
      var BASE64_MARKER = ';base64,';
      if (dataURL.indexOf(BASE64_MARKER) == -1) {
        console.log("4");
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);

        return new Blob([raw], {
          type: contentType
        });
      }
      console.log("4 else");
      var parts = dataURL.split(BASE64_MARKER);
      var contentType = parts[0].split(':')[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uInt8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }

      return new Blob([uInt8Array], {
        type: contentType
      });
    }

    function validateImage() {
      if (canvas != null) {
          console.log("5");
        image = new Image();
        image.onload = restartJcrop;
        image.src = canvas.toDataURL('image/png');
      } else restartJcrop();
    }

    function restartJcrop() {
      if (jcrop_api != null) {
          console.log("6");
        jcrop_api.destroy();
      }
      console.log("7");
      $("#views").empty();
      $("#views").append("<canvas id=\"canvas\">");
      canvas = $("#canvas")[0];
      context = canvas.getContext("2d");
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0);
      $("#canvas").Jcrop({
        onSelect: selectcanvas,
        onRelease: clearcanvas,
        boxWidth: crop_max_width,
        boxHeight: crop_max_height
      }, function() {
          console.log("8");
        jcrop_api = this;
      });
      clearcanvas();
    }

    function clearcanvas() {
        console.log("9");
      prefsize = {
        x: 0,
        y: 0,
        w: canvas.width,
        h: canvas.height,
      };
    }

    function selectcanvas(coords) {
        console.log("10");
      prefsize = {
        x: Math.round(coords.x),
        y: Math.round(coords.y),
        w: Math.round(coords.w),
        h: Math.round(coords.h)
      };
    }

    function applyCrop() {
        console.log("11");
      canvas.width = prefsize.w;
      canvas.height = prefsize.h;
      context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width, canvas.height);
      validateImage();
    }

    $("#cropbutton").click(function(e) {
        console.log("12");
      applyCrop();
    });

    $("#form").submit(function(e) {
      console.log("form clicked for image");
      e.preventDefault();
      formData = new FormData($(this)[0]);
      var blob = dataURLtoBlob(canvas.toDataURL("image/png"));
      //---Add file blob to the form data
      formData.append("file", blob);
      $.ajax({
        url: "/uploadImages/",
        type: "POST",
        data: formData,
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
          console.log("Successfully uploaded");
          location.href = "${pageContext.request.contextPath}/myPage/"
        },
        error: function(data) {
          alert("Error");
        },
        complete: function(data) {}
      });
    }); 
</script>

我想将canvas作为图像发送到服务器，但原始图像会发送到服务器。