Django图片上传裁剪报错：$image.cropper is not a function

这个错误的核心原因主要有两个：Cropper.js没有正确初始化，或者Materialize和Bootstrap的模态框组件冲突，下面给你一步步拆解解决方法：

一、先确认Cropper资源是否正确引入 #

首先要确保你已经完整引入了Cropper的依赖，并且加载顺序正确：

1. 必须先引入jQuery，再引入Cropper的CSS和JS，最后才是Materialize和你的自定义脚本。正确的引入顺序应该是这样的：

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Cropper样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
<!-- Cropper核心JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<!-- Materialize JS（如果必须使用） -->
<script src="path/to/your/materialize.min.js"></script>
<!-- 你的自定义脚本 -->
<script>
  // 你的裁剪逻辑代码
</script>

2. 打开浏览器F12的Network面板，刷新页面，检查Cropper的CSS和JS是否成功加载（没有404错误）。

二、解决Materialize和Bootstrap模态框的冲突 #

你现在同时用了两种模态框：教程里的Bootstrap模态框（依赖shown.bs.modal这类Bootstrap事件），以及Materialize的模态框初始化代码$('.modal').modal({ dismissible: true });，这两个库的模态框逻辑会互相干扰，导致Cropper的初始化代码（绑定在Bootstrap的shown.bs.modal事件上）根本没触发，自然就会出现cropper is not a function的错误。

你可以二选一解决这个冲突：

选项1：改用Materialize的模态框事件 #

如果你要保留Materialize，把Bootstrap的模态框事件换成Materialize的对应事件，同时调整HTML结构适配Materialize：

• 修改你的JS代码中模态框的事件绑定：

// 替换原来的Bootstrap事件绑定
$("#modalCrop").on("open", function () {
  var $image = $("#image");
  $image.cropper({
    viewMode: 1,
    aspectRatio: 1/1,
    minCropBoxWidth: 300,
    minCropBoxHeight: 300,
    ready: function () {
      $image.cropper("setCanvasData", canvasData);
      $image.cropper("setCropBoxData", cropBoxData);
    }
  });
}).on("close", function () {
  var $image = $("#image");
  cropBoxData = $image.cropper("getCropBoxData");
  canvasData = $image.cropper("getCanvasData");
  $image.cropper("destroy");
});

• 调整HTML的模态框结构为Materialize格式：

<div id="modalCrop" class="modal">
  <div class="modal-content">
    <h4>Crop the photo</h4>
    <img src="" id="image" style="max-width: 100%;">
  </div>
  <div class="modal-footer">
    <div class="btn-group left" role="group">
      <button type="button" class="btn btn-default js-zoom-in">
        <span class="glyphicon glyphicon-zoom-in"></span>
      </button>
      <button type="button" class="btn btn-default js-zoom-out">
        <span class="glyphicon glyphicon-zoom-out"></span>
      </button>
    </div>
    <a href="#!" class="modal-close btn-flat">Nevermind</a>
    <button type="button" class="btn btn-primary js-crop-and-upload">Crop and upload</button>
  </div>
</div>

选项2：移除Materialize的模态框初始化，只用Bootstrap #

如果你的项目不需要Materialize的模态框功能，直接删掉这句代码：

$('.modal').modal({ dismissible: true });

同时确保你已经正确引入了Bootstrap的JS文件，这样原来的Bootstrap模态框事件就能正常触发，Cropper也会被正确初始化。

额外检查点 #

• 确保页面中没有重复引入jQuery，多个jQuery实例会导致Cropper插件无法挂载到正确的$对象上。
• 打开浏览器控制台，检查是否有其他报错，比如jQuery未定义、资源加载失败等，这些都会间接导致Cropper无法正常工作。

内容的提问来源于stack exchange，提问作者Micah Pearce