CropperJS：存储在服务器中的图像Django

编程问答 2022-04-30

问题描述

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

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 错误。我收到了帖子，但图片没有加载到媒体文件中。不过越来越近了。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cropperjsdjangojavascript