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

Question

我的代码正在裁剪图像，但裁剪后的图像非常大。我正在使用Cropit jQuery plugin。

我的视图在图像上有一个 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>

在我的控制器中，创建函数通过请求获取裁剪图像并写入文件，但新文件太大。例如，输入文件为 50kb，裁剪后的输出文件为 600kb。通常裁剪后的图像必须小于输入图像。如何解决问题？

[HttpPost]
public ActionResult Create()
{
    var dataurl = Request["image-data"];
    var data = dataurl.Substring(dataurl.IndexOf(",") + 1);
    var newfile = Convert.FromBase64String(data);

    var layoutfilename = Guid.NewGuid().ToString() + "_imgage.jpg";
    var dataFile = Server.MapPath(@"~/Img/" + layoutfilename);
    System.IO.File.WriteAllBytes(dataFile, newfile);
}

Answer 1

查看 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
});