如何使用jQuery Cropit插件最小化請求的圖像？

Question

我的代碼正在裁剪圖像，但是裁剪的圖像非常大。 我正在使用Cropit 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中，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
});