質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17592questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Python

    9277questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • Python 3.x

    7446questions

    Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

  • jQuery

    7125questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Django

    1188questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Djangoでの画像切り抜きアプリ

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 255

Nisycon

score 0

 前提・実現したいこと

Djangoで画像切り抜きアプリを作りたいですが、
cropper.jsで切り取る座標データをformsでうまく渡すことができません。

渡した値をCropSizeというModelに引き渡すところまで実現したいです。

 発生している問題・エラーメッセージ

・405 HTTP Error
・リダイレクト

など、さまざま。

 該当のソースコード

##forms.py

class CropForm(forms.Form):
  x = forms.FloatField(widget=forms.HiddenInput())
  y = forms.FloatField(widget=forms.HiddenInput())
  w = forms.FloatField(widget=forms.HiddenInput())
  h = forms.FloatField(widget=forms.HiddenInput())
##models.py

class CropSize(models.Model):
  x = models.FloatField(blank=False)
  y = models.FloatField(blank=False)
  w = models.FloatField(blank=False)
  h = models.FloatField(blank=False)
##views.py
class CropView(generic.edit.FormView):
  template_name = 'app/crop.html'
  form_class = CropForm

  def form_valid(self, form):

    x = form.cleaned_data['x']
    y = form.cleaned_data['y']
    w = form.cleaned_data['w']
    h = form.cleaned_data['h']

    CropSize.objects.create(x=x, y=y, w=w, j=h)

    context = {
    'x':x,
    }

    return render(self.request, 'app/test.html', context)
{% extends 'app/base.html '%}
{% load static%}

{% block javascript %}
<script>
$(document).ready(function() {

  var $image = $('.cropper > img'),replaced;

  $('#img').cropper({
    aspectRatio: 4 / 4,
    minCropBoxWidth: 50,
    minCropBoxHeight: 50,

    });

  $('#getData').on('click', function(){

     var data = $('#img').cropper('getData');

     var image = {
       width: Math.round(data.width),
       height: Math.round(data.height),
       x: Math.round(data.x),
       y: Math.round(data.y),
      };

      $("#id_x").val(image["x"]);
      $("#id_y").val(image["y"]);
      $("#id_h").val(image["height"]);
      $("#id_w").val(image["width"]);
      $("#getData").submit();

  });

});

</script>
{% endblock %}

{% block content %}
    <div id="ww">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 centered">
                    <h1>画像を切り抜く</h1>
                        <div class="cropper">
                          <img id="img" class="img-responsive" src="{%static 'app/img/imagesearch.jpg'%}" alt="">
                        </div>
                        <form action="" method="POST" enctype='multipart/form-data'>
                          {% csrf_token %}
                          <button id="getData" class="btn btn-outline-primary btn-lg">切り取る</button>
                        </form>
                </div><!-- /col-lg-8 -->
            </div><!-- /row -->
        </div> <!-- /container -->
    </div><!-- /ww -->
{% 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/ツールのバージョンなど)

全然違う方法でも良いので、切り取りの座標がわかる方法があれば、
なんでも教えてほしいです!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

<input type="hidden" name="x" value="">
<input type="hidden" name="y" value="">
<input type="hidden" name="w" value="">
<input type="hidden" name="h" value="">


HTMLにこんな記載をし、valueに値を挿入したらできました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

<input type="hidden" name="x" value="">
<input type="hidden" name="y" value="">
<input type="hidden" name="w" value="">
<input type="hidden" name="h" value="">


HTMLにこんな記載をし、valueに値を挿入したらできました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    17592questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Python

    9277questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • Python 3.x

    7446questions

    Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

  • jQuery

    7125questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Django

    1188questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。