jQuery裁剪器不适用于动态生成的图像

Question

I have just downloaded this jQuery plugin that helps in cropping an image. I have the following function which is called on an file input field's change event:

function loadPreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(".photoBox div").hide();
            var cropBox = $(".photoPreview").show();
            var $img = $(document.createElement('img'));
            $img.attr("src", e.target.result);
            cropBox.append($img);

            $(".photoPreview img").cropper({
                aspectRatio: 1,
                dashed: false,
                zoomable: false,
                rotatable: false
            });
        };

        reader.readAsDataURL(input.files[0]);
    }
}

The cropper code doesn't show up in Mozilla, but in Opera it does. Where am I wrong?

Answer 1

Try to use createObjectURL func instead of FileReader:

imageUrl = window.URL.createObjectURL(input.files[0])
$img.attr("src", imageUrl);