Django clean-image-crop-uploader 问题

Question

我正在编写一个简单的博客网站，我希望用户能够上传和裁剪图像以将其用作他们的帖子横幅。 我一直在尝试实现cicu (clean-image-crop-uploader)。由于我使用的是 Django 1.6，因此我不得不对提供的示例进行一些修改，但我设法让它完美地工作。但是我似乎无法将它实施到我的项目中。

我的上传框似乎重复了按钮。同样，一旦上传了图像，就会出现 3-4 个裁剪区域而不是一个。 （一个是随机预览区）

这是我的文章模型

class Article(models.Model):
'''Article Model'''

image = models.ImageField(
    verbose_name="image",
    null=True,
    blank=True,
    upload_to='/ajax_uploads/',
    max_length=300
)

title = models.CharField(
    verbose_name = _(u'Title'),
    help_text = _(u' '),
    max_length = 255
)
slug = models.SlugField(
    verbose_name = _(u'Slug'),
    help_text = _(u'Uri identifier.'),
    max_length = 255
)
content_markdown = models.TextField(
    verbose_name = _(u'Content (Markup)'),
    help_text = _(u' '),
)
content_markup = models.TextField(
    verbose_name = _(u'Content (Markup)'),
    help_text = _(u' '),
)
categories = models.ManyToManyField(
    Category,
    verbose_name = _(u'Categories'),
    help_text = _(u' '),
    null = True,
    blank = True
)
date_publish = models.DateTimeField(
    verbose_name = _(u'Publish Date'),
    help_text = _(u' ')
)

class Meta:
    app_label = _(u'blog')
    verbose_name = _(u'Article')
    verbose_name_plural = (u'Articles')
    ordering = ['-date_publish']

def save(self):
    self.content_markup = markdown(self.content_markdown, ['codehilite'])
    super(Article, self).save()

def __unicode__(self):
        return '%s' % (self.title,)


class ImageCrop(forms.ModelForm):
class Meta:
    model = Article
    cicuOptions = {
        'ratioWidth': '', #if image need to have fix-width ratio
        'ratioHeight':'', #if image need to have fix-height ratio
        'sizeWarning': 'False', #if True the crop selection have to respect minimal ratio size defined above.
    }
    widgets = {
        'content_markdown' : PagedownWidget(),
        'image': CicuUploderInput(options=cicuOptions)
    }
    exclude = ['content_markup',]

查看：

@login_required
@never_cache
def new_article(request):

if request.method == 'POST': # If the form has been submitted...

    form = ImageCrop(request.POST) # A form bound to the POST data
    if form.is_valid(): # All validation rules pass
        form.save()
        return HttpResponseRedirect('/blog/')

else:
    if request.GET.get('id',None):
        form = ImageCrop(instance=Article.objects.get(id=request.GET.get('id',None)))
    else:
        form = ImageCrop()

return render(request, 'blog/article/new_article.html', {
    'form': form,
    })

模板：

{% block meta %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="{% static "cicu/css/bootstrap.css" %}" rel="stylesheet" type="text/css"/>
<script src="{% static "cicu/js/bootstrap.js" %}"></script>
{{ form.media }}
<title>CICU Image Crop ajax Uploader</title>
{% endblock %}

{% block content %}
<form id="testFormCicu" action="" method="POST">
    {% csrf_token %}
    {{ form.as_table }}
    <input id="submit" type="submit" value="Submit">
</form>
{% endblock %}

我真的不知道到底哪里出了问题。如果我错过了一些简单的事情，我真的很抱歉浪费你的时间。任何帮助表示赞赏。

UPDATAE

看起来我的 js/css 复制了裁剪区域。我不知道为什么以及如何，但是当我把它去掉后它就起作用了！

几乎就是这样......现在它在尝试裁剪任何东西时会抛出 400 个。

Failed to load resource: the server responded with a status of 400 (BAD REQUEST)

Answer 1

由于 400 问题是一个不同的问题，我将回答我自己的问题。

似乎我处理响应式设计的 js 文件复制了我的图像裁剪字段。