I am working on a django project that requires adding a profile picture and that works; but where the problem comes in is that when someone uploads a picture that is quite long or quite wide, the profile image display would look weird. I tried initializing basic cropperjs by adding this to my base.html
<link rel="stylesheet" href="{% static 'cropperjs/dist/cropper.min.css' %}">
<script type="module" src="{% static 'cropperjs/dist/cropper.min.js' %}">
and i just wanted to follow the docs and i kept my edit-profile.html
{% block content %}
<div class="image-box">
<img src="{{ request.user.userprofile.profile_image.url }}" id="image" width="300px">
</div>
{% endblock %}
and my 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');
but then when i runserver and i inspect the page, i see the error
edit_profile.js:3 Uncaught ReferenceError: $ is not defined
at edit_profile.js:3:14
so i tried creating a normal html file and linked it with a javascript file an then tried to initialize 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>
and 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);
},
});
and i get these set of errors
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)
its getting quite confusing, and i don't know what i'm doing wrong
$is a common shortcut for jQuery. You're using it on line 3 to select the element with the id of "image".Your (first) error is saying
$is not defined, which means you didn't load jQuery. Make sure you load jQuery by including it using a script tag in your HTML somewhere. Something like:Then you should be able to run your first code with no problem!