前提・実現したいこと
Djangoで画像切り抜きアプリを作りたいですが、
cropper.jsで切り取る座標データをformsでうまく渡すことができません。
渡した値をCropSizeというModelに引き渡すところまで実現したいです。
発生している問題・エラーメッセージ
・405 HTTP Error
・リダイレクト
など、さまざま。
該当のソースコード
python
1##forms.py 2 3class CropForm(forms.Form): 4 x = forms.FloatField(widget=forms.HiddenInput()) 5 y = forms.FloatField(widget=forms.HiddenInput()) 6 w = forms.FloatField(widget=forms.HiddenInput()) 7 h = forms.FloatField(widget=forms.HiddenInput())
python
1##models.py 2 3class CropSize(models.Model): 4 x = models.FloatField(blank=False) 5 y = models.FloatField(blank=False) 6 w = models.FloatField(blank=False) 7 h = models.FloatField(blank=False)
python
1##views.py 2class CropView(generic.edit.FormView): 3 template_name = 'app/crop.html' 4 form_class = CropForm 5 6 def form_valid(self, form): 7 8 x = form.cleaned_data['x'] 9 y = form.cleaned_data['y'] 10 w = form.cleaned_data['w'] 11 h = form.cleaned_data['h'] 12 13 CropSize.objects.create(x=x, y=y, w=w, j=h) 14 15 context = { 16 'x':x, 17 } 18 19 return render(self.request, 'app/test.html', context)
HTML
1{% extends 'app/base.html '%} 2{% load static%} 3 4{% block javascript %} 5<script> 6$(document).ready(function() { 7 8 var $image = $('.cropper > img'),replaced; 9 10 $('#img').cropper({ 11 aspectRatio: 4 / 4, 12 minCropBoxWidth: 50, 13 minCropBoxHeight: 50, 14 15 }); 16 17 $('#getData').on('click', function(){ 18 19 var data = $('#img').cropper('getData'); 20 21 var image = { 22 width: Math.round(data.width), 23 height: Math.round(data.height), 24 x: Math.round(data.x), 25 y: Math.round(data.y), 26 }; 27 28 $("#id_x").val(image["x"]); 29 $("#id_y").val(image["y"]); 30 $("#id_h").val(image["height"]); 31 $("#id_w").val(image["width"]); 32 $("#getData").submit(); 33 34 }); 35 36}); 37 38</script> 39{% endblock %} 40 41{% block content %} 42 <div id="ww"> 43 <div class="container"> 44 <div class="row"> 45 <div class="col-lg-8 col-lg-offset-2 centered"> 46 <h1>画像を切り抜く</h1> 47 <div class="cropper"> 48 <img id="img" class="img-responsive" src="{%static 'app/img/imagesearch.jpg'%}" alt=""> 49 </div> 50 <form action="" method="POST" enctype='multipart/form-data'> 51 {% csrf_token %} 52 <button id="getData" class="btn btn-outline-primary btn-lg">切り取る</button> 53 </form> 54 </div><!-- /col-lg-8 --> 55 </div><!-- /row --> 56 </div> <!-- /container --> 57 </div><!-- /ww --> 58{% endblock %}
試したこと
以下、参考サイトです。
・https://simpleisbetterthancomplex.com/tutorial/2017/03/02/how-to-crop-images-in-a-django-application.html
・http://co.bsnws.net/article/50
これらのサイトの情報を参考にしました。
ただJS、JQueryの扱い、Djangoとの連携がわからない状況です。
補足情報(FW/ツールのバージョンなど)
全然違う方法でも良いので、切り取りの座標がわかる方法があれば、
なんでも教えてほしいです!
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。