如何使用jquery裁剪插件最小化请求的图像

How to minimize requested image using jquery cropit plugin?

本文关键字：请求 图像 最小化 插件 何使用 jquery 裁剪      更新时间：2023-09-26

我的代码正在裁剪图像，但裁剪的图像非常大。我正在使用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>

在我的控制器中创建函数通过请求和写入文件获取裁剪图像，但新文件太大。例如，输入文件为 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);
}

查看 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
});
相关文章：