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文件复制了我的图像裁剪字段。

Django clean-image-crop-uploader问题

1 个答案: