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

        }
    });

但问题是该库仍然加载了＆gt; 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

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

1 个答案: