Question

我有以下代码来更改文件选择上的图像以与cropper.js一起使用。这在我第一次选择文件时效果很好，但是当我尝试更改文件时，img不会更新。每次更改文件时都不应该更改火灾吗？

        document.getElementById("avatar").onchange = function () {
            var reader = new FileReader();

            reader.onload = function (e) {
                // get loaded data and render thumbnail.
                document.getElementById("image").src = e.target.result;

                $('#image').cropper({
                    aspectRatio: 1,
                    preview: ".img-preview",
                    crop: function(e) {
                        // Output the result data for cropping image.
                        $('#x').val(e.x);
                        $('#y').val(e.y);
                        $('#w').val(e.width);
                        $('#h').val(e.height);
                    }
                });
            };

            // read the image file as a data URL.
            reader.readAsDataURL(this.files[0]);
        };

更新：显然文件阅读器api正在更新，因为我没有使用裁剪器，我预期的功能。我在哪里可以放置cropper.js引导程序，以便它也可以通过img的源更改进行更新？

Answer 1

在onchange之后直接添加它可以很好地工作。

if($('#image').cropper("active")) {
    $('#image').cropper("destroy");
}

Filereader API在第一次更改后不更新文件

1 个答案: