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>

在我的Controller Create函数中，通过Request获取裁剪图像并写入文件，但新文件太大。例如，输入文件为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
});

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

1 个答案: