裁剪图像并上传

Question

我正在将base64字符串转换为图像，并且我希望将裁剪后的图像移至隐藏的输入字段，以在用户单击提交后将其发布到服务器端，但仍停留在如何将imgData传递到服务器端的问题上是未转换的字符串，我该如何处理。

一直试图追加到输入中，但不起作用

<form action="${url}" method="post" enctype="multipart/form-data">
      <div class="image-editor">
         <input type="file"  name="uploadedFile" size="50" 
           required="required" class="cropit-image-input"/>
         <input type="hidden" name="fileName" 
                                  class="hidden-image-data" />
        <div class="cropit-preview"></div>
        <div class="image-size-label">
          Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
        <button type="submit">Submit</button>
      </div>
 </form>


   <div id="result">
      <code>$form.serialize() =</code>
      <code id="result-data"></code>
    </div>



 <script>
   $(function() {
            $('.image-editor').cropit();

            $('form').submit(function() {

            var imageData = $('.image-editor').cropit('export');


          //base64 function
          function Base64ToImage(base64img, callback) {
              var img = new Image();
              img.onload = function() {
                  callback(img);
              };
              img.src = base64img;
          }

          var base64img = imageData;

          var imgData = null;
          // Base64
          Base64ToImage(base64img, function(img) {
              // <img>

              document.getElementById('main').appendChild(img);
              imgData = img;
          });
       // Move cropped image data to hidden input 
         $('.hidden-image-data').val(imgData);


          return true;



          });
        });


   </script>