裁剪上传的图像并使用Cropper.js发送裁剪的坐标

时间:2019-03-29 12:43:25

标签: django django-models python-imaging-library cropperjs

我是Django和前端技术的新手,试图构建一个Django Web应用程序,在该Web应用程序中,用户上传图像,查看完整图像并仅在客户端裁剪相同的图像。服务器端只会收到未裁剪的原始图像图像和所选裁切盒用户的裁切坐标(x,y,宽度,高度)。我已经阅读了一些使用cropper.js的教程,但是我不知道执行此操作的正确方法是什么?

当前,用户可以浏览和上传图像文件,然后将其保存在数据库(文件路径)中。

我的文件如下

forms.py

from django import forms
class ImageUploadForm(forms.Form):
  image = forms.ImageField()

model.py

from django.db import models
class ImageModel(models.Model):
image = models.ImageField(upload_to = 'media/')

views.py

from django.shortcuts import render
from .models import ImageModel
from .forms import ImageUploadForm

def upload(request):
if request.method == 'POST':
    form = ImageUploadForm(request.POST, request.FILES)
    if form.is_valid():
        p = ImageModel(image = request.FILES['image'])
        p.save()
        return render(request, 'abc.html')
else : 
    form = ImageUploadForm()
return render(request, 'index.html', {'form': form})

模板index.html

<body>
<table>
<tr>
  <td>
    <form action="" method="POST" enctype="multipart/form-data">
      <p>
        {{form}}
      </p>
      <br />
      <input type="submit" value="Upload File" />
    </form>
  </td>
</tr>
</body>

我发现此代码段已在此问题中得到解答,但无法理解如何与现有的django应用集成。cropper.js uploading the original images with coordinates

谢谢。

0 个答案:

没有答案
相关问题