如何使用插件检查图像大小？

Question

我的代码正在剪切图像，但不检查图像大小是否大于15 MB。我正在使用克罗维特jQuery插件。

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

(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

当输入值发生变化时，您应该将文件输入更改为某些虚拟输入，并手动更新图像URL。

更新小提琴。

特别是看看这几行：

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);
});

摆弄base64。

另见：将blob转换为base64