我正在制作一个项目，我试图在将其上传到服务器之前裁剪图片

Question

我在网上搜索，最后来到下面的代码。我设法裁剪图像并将其转换为base64格式，但无法将其转换为multipart / form-data类型以上传它。我知道我错过了一些东西，但是我无法弄明白。

 <link rel="stylesheet" href="style.css" type="text/css" />
     <style>
         .container
          {
             position: absolute;
            top: 10%; left: 10%; right: 0; bottom: 0;
        }
        .action
        {
            width: 400px;
            height: 30px;
            margin: 10px 0;
        }
        .cropped>img
        {
            margin-right: 10px;
        }
    </style>

    <script src="cropbox.js"></script>
    <div class="container">
        <div class="imageBox">
            <div class="thumbBox"></div>
            <div class="spinner" style="display: none">Loading...</div>
        </div>
        <form action='upload.jsp' enctype="multipart/form-data" method="post" id="form1">
            <input type="text" name="name"/>

            <input type='submit'>
        </form>
        <div class="action">

            <input type='file' id="file" accept='.jpeg,.png,.jpg' style="float:left; width: 250px;">

            <input type="button" id="btnCrop" value="Crop" style="float: right">
            <input type="button" id="btnZoomIn" value="+" style="float: right">
            <input type="button" id="btnZoomOut" value="-" style="float: right">
        </div>
        <div class="cropped">

        </div>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var options =
                    {
                        imageBox: '.imageBox',
                        thumbBox: '.thumbBox',
                        spinner: '.spinner',
                        imgSrc: 'avatar.png'
                    }
            var cropper;
            document.querySelector('#file').addEventListener('change', function () {
                var reader = new FileReader();
                reader.onload = function (e) {
                    options.imgSrc = e.target.result;
                    cropper = new cropbox(options);
                };
                reader.readAsDataURL(this.files[0]);
                this.files = [];
            });
            document.querySelector('#btnCrop').addEventListener('click', function () {
                var img = cropper.getDataURL();
                document.querySelector('.cropped').innerHTML = '<img src="' + img + '">';
                var blob = dataURItoBlob(img);
                var fd = new FormData(document.forms[0]);
                fd.append("profile_pic", blob);
            });
            document.querySelector('#btnZoomIn').addEventListener('click', function () {
                cropper.zoomIn();
            });
            document.querySelector('#btnZoomOut').addEventListener('click', function () {
                cropper.zoomOut();
            });
        };
        function dataURItoBlob(dataURI) {
            // convert base64/URLEncoded data component to raw binary data held in a string
            var byteString;
            if (dataURI.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(dataURI.split(',')[1]);
            else
                byteString = unescape(dataURI.split(',')[1]);

            // separate out the mime component
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

            // write the bytes of the string to a typed array
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            return new Blob([ia], {type: mimeString});
        }

    </script>