Блог

Главная - Вопросы по программированию - обрезка не загружается в элемент img при модальном

обрезка не загружается в элемент img при модальном

#javascript #html #css #crop #cropperjs

#javascript #HTML #css #обрезка #cropperjs

Вопрос:

Я использую fengyuanchen cropper для обрезки загруженного изображения, а затем отправляю его в форму.

 <div id="change-dp" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-outside" type="button" uk-close></button>
            <h2 class="uk-modal-title">Change Profile Picture</h2><br>
            <form action="{{url_for('upload_dp', username=username)}}" method="POST" enctype="multipart/form-data">
            <input type="file" accept="image/*" placeholder="Upload profile picture" onchange="loadFile(event)" id="uploaded" required>
            <img id="dp" onchange=""/>
                    
            <div id="cropped"></div>

            <button type="submit">Upload</button>
            </form>
        </div>
    </div>

Javascript

 var cropper;

function loadFile(image) {
    var dp = document.getElementById('dp')
    dp.src = URL.createObjectURL(image.target.files[0]);
    dp.onload = function() { URL.revokeObjectURL(dp.src)};
    cropper = new Cropper(dp, { aspectRatio: 1 });
};

Идея в том, что как только пользователь загружает изображение, оно отображается с помощью cropper, при отправке я сгенерирую обрезанные данные в обрезанный div с помощью js и отправлю их как dp на сервер. Я не могу получить отображение cropper.

Я не использую jquery, в котором есть большая часть документации.

JSFiddle

Ответ №1:

Похоже, что вы загружаете скрипт обрезки на сайт ненадежного домена и забыли также загрузить файл css. Вот официальная ссылка CDN:https://cdnjs.com/libraries/cropperjs

 // CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.css" integrity="sha512-AuLN6bHjJzqZ Iw48 GdQPp5uKBdPX6 zWV37ju9zw7XIrevIX01RsLtpTU/zCoQcKrQRPe/EpwDpZiv7OUYMA==" crossorigin="anonymous" />

// Script
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.min.js" integrity="sha512-N4T9zTrqZUWCEhVU2uD0m47ADCWYRfEGNQ dx/lYdQvOn 5FJZxcyHOY68QKsjTEC7Oa234qhXFhjPGQu6vhqg==" crossorigin="anonymous"></script>

Комментарии:

1. Это не решает проблему. Я использую загруженные файлы. Это всего лишь настройка для jsfiddle. Я не думаю, что безопасность является проблемой для jsfiddle.

2. Это неважно. Кроппер не появляется. Знаете ли вы, в чем проблема в приведенном выше коде?

3. Как я могу сказать, если я не вижу, как вы реализовали? Но, вероятно, ваш объект / стили Cropper не были загружены, также важен стиль, который отображает что-то, с чем вы можете взаимодействовать?

4. Нет проблем с загрузкой cropper.min.css или cropper.min.js в этом я могу вас заверить. Приведенный выше код отображается в jsfiddle. Вы можете использовать свои ссылки cdnjs, если хотите, в приведенном выше jsfiddle, это ничего не изменит. Я написал приведенный выше код.

5. Это правильно. Это сработало. Я думаю, что cropper.min.css не работает. cropper.css дал мне обрезку. Большое спасибо, чувак @tmhao2005