图像被裁剪时，'Filereader'不会改变'reader'值，为什么？

我使用“FileReader”从input框中的原始图像中检索数据，但当裁切图像时，我无法获得新的读取器值。 所以当我在亚马逊上传时，我仍然有原始图像。 当我裁剪图像时，如何获得新的读者价值？

JavaScript代码：

require(['cropper']); $('body').on('change', '#image-of-shop', function(e) { e.preventDefault(); var overlay = $('<div class="page-overlay image-crop"></div>'), content = $('<div class="image-wrap"></div>'); content.append('<a href="#" class="close-static" data-event="close-crop"></a>'); var files = e.target.files; var f = files[0]; fileName = f.name; var reader = new FileReader(); reader.onload = function(theFile) { return function(e) { content.append('<img id="cropper" src="' + e.target.result + '" />'); $('body').append(overlay.append(content)); var img_data = { ratio: 1 }; var cropper = $("#cropper").cropper({ aspectRatio: 3 / 2, minWidth: 600, done: function(data) { $('.image-wrap').attr('data-w', data.width).attr('data-h', data.height).attr('data-x', data.x).attr('data-y', data.y); }, built: function() { content.append('<a href="#" class="crop-image green-btn" data-event="crop-image">Save</a>'); img_data = $("#cropper").cropper("getImgInfo"); } }); overlay.addClass('visible'); }; }(f); reader.readAsDataURL(f); }) 

HTML代码：

 <form id="company-image" action="localhost:80/media/create" enctype="multipart/form-data" method="POST"> <input type="hidden" name="cropx" value="" /> <input type="hidden" name="cropy" value="" /> <input type="hidden" name="cropwidth" value="" /> <input type="hidden" name="cropheight" value="" /> <input type="hidden" name="cropcomp" value="" /> <input type="file" id="image-of-shop" name="avatar" class="form-control" fileread /> </form>