javascript - 如何使用 jquery cropit 插件检查图像大小？

Question

我的代码正在裁剪图像，但不检查图像大小是否大于 15 MB。我正在使用 Cropit jQuery plugin .

我正在使用这段代码来初始化库:

(function() {
    var b;
    b = function(a) {
        return 1 === a.code ? (this.find(".error-msg").text("Please use an image that's at least " + this.outerWidth() + "px "+ this +"in width and " + this.outerHeight() + "px in height."),
                this.addClass("has-error"),
                window.setTimeout(function(a) {
                    return function() {
                        console.log(img);
                        return a.removeClass("has-error")
                    }
                }
                (this), 3e3)) : void 0
    }
    ,
    function() {
        var f;
        return f = jQuery(".image-editor"),
                f.cropit({
                    imageBackgroundBorderWidth: 70,
                    imageBackground: true,
                    imageState: {
                        src: '<%= @image.blank? ? '/assets/image_upload/image-person.png' : @image.image.url(:original) %>'
                    },
                    onImageError: b.bind(f.find(".cropit-image-preview")),
                })
    }
    ()
}
).call(this);

如何检查图像是否大于 15 MB？我试过:

    limitsize = 15;

    jQuery('.cropit-image-input').bind('change', function() {

        image = this.files[0];

        if((image.size / (1024*1024)) > limitsize) {
            jQuery('.image-editor').find(".error-msg").text("Please use an image smaller than 10 MB");
            jQuery('.image-editor').cropit('imageSrc', '<%= @image.blank? ? '/assets/image_upload/image-person.png' : @image.image.url(:original) %>');
            jQuery('.image-editor').addClass("has-error");
            window.setTimeout(function () {
                jQuery('.image-editor').removeClass("has-error")

            }, 3e3);

        }
    });

但问题是库仍然加载 > 15 图片。

JSFiddle .

Answer 1

您应该在将 cropit 初始化为某个虚拟输入时更改文件输入，并在输入值更改时手动更新图像 URL。

Updated fiddle .

特别看一下这些行:

f.cropit({
  // [...]
  onImageError: b.bind(f.find(".cropit-image-preview")),
  $fileInput: jQuery("dummy-file-input")
})

// [...]

if((image.size / (1024*1024)) > limitsize) {
  // [...]
} else {
  jQuery(".image-editor").cropit("imageSrc", URL.createObjectURL(image));
}

如果你想在 base64 中使用图像，请使用 FileReader :

var reader = new FileReader();
reader.readAsDataURL(image);
reader.addEventListener("loadend", function() {
  jQuery(".image-editor").cropit("imageSrc", reader.result);
});

Fiddle with base64 .

另请参阅:Convert blob to base64