【问题标题】：CropperJS : Images stored in server (Django)CropperJS：存储在服务器中的图像（Django）
【发布时间】：2021-08-11 04:55:58
【问题描述】：

如何裁剪存储在服务器中的图像？我没有使用表格，因为我没有上传图片。如何做到这一点？

Django 视图

from .models import Image

def main_view(request):
    
    obj = Image.objects.get(pk=1)
    context = {'obj':obj}
    return render(request, 'main.html',context)

HTML + CROPPERJS

<img src="{{obj.file.url}}" id="image" width="400px" >
{% csrf_token %}
<input type="button" id="confirm-btn" value="Start cropping" />


<script>

const csrf = document.getElementsByName('csrfmiddlewaretoken')
console.log(csrf)
const image = document.getElementById('image');
const confirmBtn = document.getElementById('confirm-btn')
console.log(image)


const cropper = new Cropper(image, {
  aspectRatio: NaN,
  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);
    /*const canvas = cropper.getCroppedCanvas();
    console.log(canvas)*/

}

});


    confirmBtn.addEventListener('click', ()=>{
    cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        console.log(formData)
        formData.append('csrfmiddlewaretoken', csrf[0].value)
        formData.append('file', blob, 'my-image.png' );
        console.log(formData)

        $.ajax({
            method: 'POST',
            enctype: 'multipart/form-data',
            data: formData,
            processData: false,
            contentType: false,
            success() {
              console.log('Upload success');
            },
            error() {
              console.log('Upload error');
            },
          });
        }/*, 'image/png' */);

    });

编辑1：

我已经到了我得到的地步：禁止（CSRF 令牌丢失或不正确。）。必须有一个与帖子相关联的 {% csrf_token %} ......有些东西不见了

编辑 2：

不再收到 csrf 错误。我收到了帖子，但图像没有加载到媒体文件中。不过越来越近了。

【问题讨论】：

标签： javascript django cropperjs

【解决方案1】：

这是可以做到的。这是一个考虑 csrf_token 的问题，知道如何实现 AJAX 并正确接收 post 请求并将其保存到表单中。再见！

const csrf = document.getElementsByName('csrfmiddlewaretoken')
console.log(csrf)
const image = document.getElementById('image');
const confirmBtn = document.getElementById('confirm-btn')
console.log(image)


const cropper = new Cropper(image, {
  aspectRatio: NaN,
  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);
    /*const canvas = cropper.getCroppedCanvas();
    console.log(canvas)*/

}

});


confirmBtn.addEventListener('click', ()=>{
    cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        console.log(formData)
        formData.append('csrfmiddlewaretoken', csrf[0].value)
        formData.append('file', blob, 'my-image.png' );
        console.log(formData)

        $.ajax({
            method: 'POST',
            enctype: 'multipart/form-data',
            data: formData,
            processData: false,
            contentType: false,
            success() {
              console.log('Upload success');
            },
            error() {
              console.log('Upload error');
            },
          });
        }/*, 'image/png' */);

    });

【讨论】：