如果图像是数据，则裁剪器不起作用

Question

我想在用户上传图片时裁剪图片，裁剪后我想将其保存在数据库中。我想用 cropper 或 cropperjs 来做。如果我使用服务器中的图像，一切都很好，但是当我想使用上传的文件时，裁剪器不起作用。

<input type="file" id="fileinput" accept="image/*" />
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" id="gallery">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myLargeModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-dark" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-sm btn-default">Save changes</button>
            </div>
        </div>
    </div>
</div>
@section Scripts{

    @*<link href="~/lib/cropperjs/dist/cropper.css" rel="stylesheet" />
        <script src="~/lib/cropperjs/dist/cropper.js"></script>*@
    <link href="~/lib/cropper/dist/cropper.css" rel="stylesheet" />
    <script src="~/lib/cropper/dist/cropper.js"></script>
    <script>
        window.onload = function () {
            var image;//= document.getElementById('image');
            var cropper;


            $("#btn").click(function (event) {
                cropper.getCroppedCanvas().toBlob(function (blob) {
                    var formData = new FormData();
                    formData.append('croppedImage', blob);
                    $.ajax('/Home/Upload', {
                        method: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                            console.log('Upload success');
                        },
                        error: function () {
                            console.log('upload Error');
                        }
                    })
                });
            });
        }
        var uploadfiles = document.querySelector('#fileinput');
        uploadfiles.addEventListener('change', function () {
            var files = this.files;
            if (files.length > 0) {
                previewImage(this.files[0]);
                image = document.getElementById('image');

                $('#image').cropper({
                    aspectRatio: 16 / 9,
                    viewMode: 1,
                    autoCropArea: 1,
                    minContainerWidth: 700,
                    minContainerHeight:600
                });
            }

        }, false);
        function previewImage(file) {
            var galleryId = "gallery";

            var gallery = document.getElementById(galleryId);
            var imageType = /image.*/;

            if (!file.type.match(imageType)) {
                alert("File Type must be an image");
            }

            var thumb = document.createElement("div");
            thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div

            var img = document.createElement("img");
            img.id = "image";
            img.style = "max-width:100%";
            //img.src = "images/banner1.svg"; //if I use this line everything is fine!!!!
            img.file = file;
            thumb.appendChild(img);
            gallery.innerHTML = '';
            gallery.appendChild(thumb);

            // Using FileReader to display the image content
            var reader = new FileReader();
            reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img);
            reader.readAsDataURL(file);

        }
    </script>
}

Answer 1

我发现了问题。我不知道为什么我要花很多时间来找到这个简单的问题。无论如何，我在这里为将来需要它的任何人写下它。问题是 reader 将数据设置为图像后，裁剪器未设置。为此，我们应该有这样的东西。

reader.onloadend = (function () {
                $('#image').cropper({
                    aspectRatio: 16 / 9,
                    viewMode: 1,
                    autoCropArea: 1,
                    minContainerWidth: 700,
                    minContainerHeight: 600
                });
            });

如果图像是数据，则裁剪器不起作用

cropper not work if the image be data

html

upload

image