文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在django项目中添加cropperjs

问如何在django项目中添加cropperjs
EN

Stack Overflow用户

提问于 2022-04-21 02:25:37

回答 1查看 148关注 0票数 1

我正在从事一个django项目，该项目需要添加配置文件图片，而且该项目可以工作；但问题是，当有人上传一张相当长或相当宽的图片时，概要文件图像显示看起来会很奇怪。我尝试通过将以下内容添加到我的base.html中来初始化基本的cropperjs

<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)

它变得很混乱，我不知道我做错了什么

javascript

django

cropperjs

cropper

回答 1

Stack Overflow用户

发布于 2022-04-21 02:45:25

$是jQuery常用的快捷方式。您将在第3行中使用它来选择id为"image“的元素。

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

您的(第一个)错误是没有定义$，这意味着您没有加载jQuery。确保在HTML中使用脚本标记来加载jQuery。类似于：

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

那么，您应该能够运行您的第一个代码，没有问题！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71948225

复制

相似问题

问如何在django项目中添加cropperjs
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在django项目中添加cropperjsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在django项目中添加cropperjs
EN