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

Question

我的代码是剪切一个图像，但是裁剪的图像非常大。我正在使用克罗维特jQuery插件。

我的视图在图像上有一个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函数中，可以通过请求和写入文件来裁剪图像，但是新文件太大了。例如，输入文件为50 is，裁剪输出文件为600 is。通常，裁剪后的图像必须小于输入图像。如何解决这个问题？

[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')最终调用的函数的开始。

这里发生的情况是，输入数据的压缩所产生的输入小于PNG图像输出的质量(7，8，不确定)。

可以在cropit()调用中指定选项--从插件的文档中：

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