Как добавить cropperjs в мой проект django

Я работаю над проектом django, который требует добавления картинки профиля, и это работает; но проблема в том, что когда кто-то загружает картинку, которая очень длинная или очень широкая, изображение профиля выглядит странно. Я попробовал инициализировать базовый cropperjs, добавив это в base.html

<link rel="stylesheet" href="{% static 'cropperjs/dist/cropper.min.css' %}">
<script type="module" src="{% static 'cropperjs/dist/cropper.min.js' %}">

и я просто хотел следовать документам и сохранил свои edit-profile.html

{% block content %}

<div class="image-box">
    <img src="{{ request.user.userprofile.profile_image.url }}" id="image" width="300px">
</div>

{% endblock %}

и мой edit-profile.js

console.log('Hello there')

var $image = $('#image');

$image.cropper({
    aspectRatio: 16 / 9,
    crop: function(event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
    }
});

var cropper = $image.data('cropper');

но затем, когда я runserver и проверяю страницу, я вижу ошибку

edit_profile.js:3 Uncaught ReferenceError: $ is not defined
    at edit_profile.js:3:14

Итак, я попробовал создать обычный html файл и связать его с javascript файлом, а затем попытался инициализировать cropper. index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="forum/static/cropperjs/dist/cropper.css">
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <title>Test site</title>
</head>
<body>

    <div class="image-box">
        <img src="yor.png" id="image" width="300px">
    </div>

    <script type="text/javascript" src="main.js"></script>
    <script type="module" src="cropperjs/dist/cropper.js" crossorigin="anonymous"></script>
</body>
</html>

и main.js

// import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';


const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

и я получаю такой набор ошибок

Access to script at 'file:///C:/Users/McDonald/Documents/Projects/cropperjs/dist/cropper.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.
index.html:17          GET file:///C:/Users/McDonald/Documents/Projects/cropperjs/dist/cropper.js net::ERR_FAILED
main.js:2 Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:2:1)

все становится довольно запутанным, и я не знаю, что я делаю не так

$ - это обычное сокращение для jQuery. Вы используете его в строке 3, чтобы выбрать элемент с id "image".

var $image = $('#image');

Ваша (первая) ошибка говорит, что $ не определен, что означает, что вы не загрузили jQuery. Убедитесь, что вы загрузили jQuery, включив его с помощью тега script в HTML. Что-то вроде:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Затем вы должны быть в состоянии выполнить ваш первый код без проблем!

Вернуться на верх