Javascript 如何使用jquery cropit插件最小化请求的图像？

我的代码正在裁剪图像，但裁剪后的图像非常大。我在用电话。

我的视图在图像上有一个div掩码。当表单发布时，隐藏的输入已通过以下脚本裁剪图像

<div class="image-editor" style="margin-left:120px; margin-bottom:25px; margin-top:25px;">
    <input id="fileinput" type="file" name="filex" class="cropit-image-input">
    <div class="cropit-image-preview" style="background-image:url()"></div>
    <input type="range" class="cropit-image-zoom-input">
    <input type="hidden" name="image-data" value="" class="hidden-image-data" />
    <button type="submit" class="export">Crop</button>
</div>

<script>
    $(function () {
        $('.image-editor').cropit({});
        $('.export').click(function () {
            var imageData = $('.image-editor').cropit('export');
            $('.hidden-image-data').val(imageData);
        });
     });
</script>

---

查看Cropit的源代码，以下是与输出数据大小相关的代码位：

Cropit.prototype.getCroppedImageData = function(exportOptions) {
var canvas, canvasContext, croppedSize, exportDefaults, exportZoom;
if (!this.imageSrc) {
     return null;
}
     exportDefaults = {
     type: "image/png",
     quality: .75,
     originalSize: false,
     fillBg: "#fff"
};
exportOptions = $.extend({}, exportDefaults, exportOptions);

这是

cropit（'export'）

最终调用的函数的开始

这里发生的是，输入数据的压缩产生的输入比质量（7，8，这里不确定）PNG图像的输出要小

您可以在

cropit（）

调用中指定选项-来自插件文档：

$imageCropper.cropit('export', {
  type: 'image/jpeg',
  quality: .9,
  originalSize: true
});

---

编辑的类型为jpg，质量为0.5，originalsize:true，但不起作用。需要注意的是，输出数据大小小于10 kb。输出数据大小完全取决于传递给

cropit

的选项。我个人从未使用过cropit，因此我无法为您提供确切的解决方案，但这应该会让您走上正确的方向。您知道任何cropper facebook风格吗？输出图像会重新采样，以便比原始图像更大（例如，如果输入图像被高度压缩）@jdpenix提供了正确的跟踪，使用jpeg类型和一个小的

quality

值就可以了。将

originalSize

设置为false（默认设置）也有助于减小输出文件的大小。这些都不起作用。每次输出较大的图像。有没有办法不重新取样？同时，当输入文件为1mb及以上图像时，出现“System.Web.HttpException:已达到最大请求长度”的错误。

$imageCropper.cropit('export', {
  type: 'image/jpeg',
  quality: .9,
  originalSize: true
});