teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問flask内でcropperjsを使う方法

編集履歴

質問編集履歴

1

問題点を絞り、より具体的な質問とした

2021/12/16 00:42

投稿

sandalwalk
sandalwalk

スコア77

test CHANGED
File without changes
test CHANGED
@@ -1,66 +1,10 @@
1
- flask内でcropperjsを使う方法が分からずに困っています。
1
+ flask内でcropperjsを使う方法が分からずに困っています。bootstrapが邪魔をしている所までは分かりましたが、解決方法が分かりません。
2
2
 
3
- ①flaskでhtmlを保存するディレクトリ内で以下のcropperjsを実行するhtmlは動作しています。
3
+ 以下のjinjaファイルではcopprjsは問題無く動作するのですが、base.html側でbootstrapを使うとcopperjsが動作しなくなります。bootstrapが原因なので、cssに関する設定の問題なのかと想像していますが、解決方法をご存知の方がいらしたら教えて下さい。
4
4
 
5
5
  ```html
6
6
 
7
- <script type="text/javascript" src="cropper.js"></script>
8
-
9
- <canvas id="testCanvas" width="600" height="600" style="border: 1px solid black;" >Your browser does not support canvas.</canvas>
10
-
11
-
12
-
13
- <script type="text/javascript">
14
-
15
- cropper.start(document.getElementById("testCanvas"), 1);
16
-
17
- function handleFileSelect() {
18
-
19
- var file = document.getElementById("fileInput").files[0];
20
-
21
- var reader = new FileReader();
22
-
23
- reader.onload = function(event) {
24
-
25
- var data = event.target.result;
26
-
27
- cropper.showImage(data);
28
-
29
- };
30
-
31
-
32
-
33
- reader.readAsDataURL(file);
34
-
35
- }
36
-
37
-
38
-
39
- </script>
40
-
41
- <input type="file" id="fileInput" onchange="handleFileSelect()" />
42
-
43
- <input type="button" onclick="cropper.startCropping()" value="Start cropping" />
44
-
45
- <input type="button" onclick="cropper.getCroppedImageSrc()" value="Crop" />
46
-
47
- <input type="button" onclick="cropper.restore()" value="Restore" />
48
-
49
-
50
-
51
- ```
52
-
53
- このコードをjinjaファイル内に埋め込み以下のコードを作り、flask側から呼び出すと、
54
-
55
- Uncaught ReferenceError: cropper is not defined
56
-
57
- というエラーが出てしまいます。
58
-
59
- 単体でのhtmlファイルとjavascriptでは動作するのに、flaskからhtmlファイルを呼び出すとエラーが出ている様に思うのですが、flaskでもcropperを読み込める様にするにはどの様にすればよいでしょうか。
60
-
61
- ```html
62
-
63
- {% extends "base.html" %}
7
+ <!-- {% extends "base.html" %} この一文を入れるとcropperjsが動作しなくなる -->
64
8
 
65
9
  {% import "bootstrap/wtf.html" as wtf %}
66
10
 
@@ -68,72 +12,84 @@
68
12
 
69
13
 
70
14
 
71
- <form action="/image_register" method="post" enctype="multipart/form-data">
15
+ <form action="/example" method="post" enctype="multipart/form-data">
72
16
 
73
- <div id="image_note_area" class="form-group">
17
+ <div id="menu_name_area" class="form-group">
74
18
 
75
- <div id="image_note_div">
19
+ <div id="menu_name_div">
76
20
 
77
21
  {{ form.hidden_tag() }}
78
22
 
79
- {{ wtf.form_field(form.image_note, id="note") }}
23
+ {{ wtf.form_field(form.menu_name, id="manu_name", class="form-control col-6") }}
80
24
 
81
25
  </div>
82
26
 
83
27
  </div>
84
28
 
85
- <script type="text/javascript" src="cropper.js"></script>
86
-
87
- <body>
88
-
89
-
90
-
91
- <canvas id="testCanvas" width="600" height="600" style="border: 1px solid black;" >Your browser does not support canvas.</canvas>
92
-
93
- <script type="text/javascript">
94
-
95
- cropper.start(document.getElementById("testCanvas"), 1);
96
-
97
- function handleFileSelect() {
98
-
99
- var file = document.getElementById("fileInput").files[0];
100
-
101
- var reader = new FileReader();
102
-
103
- reader.onload = function(event) {
104
-
105
- var data = event.target.result;
106
-
107
- cropper.showImage(data);
108
-
109
- };
110
-
111
- reader.readAsDataURL(file);
112
-
113
- }
114
-
115
- </script>
116
-
117
-
118
-
119
- <input type="file" id="fileInput" onchange="handleFileSelect()" />
120
-
121
- <input type="button" onclick="cropper.startCropping()" value="Start cropping" />
122
-
123
- <input type="button" onclick="cropper.getCroppedImageSrc()" value="Crop" />
124
-
125
- <input type="button" onclick="cropper.restore()" value="Restore" />
126
-
127
-
128
-
129
- <button type="submit" class="btn btn-info" name = "action">保存する</button>
130
-
131
- <a class="btn btn-info" href="/" role="button">キャンセル</a>
132
-
133
29
  </form>
134
30
 
135
31
 
136
32
 
33
+ <script type="text/javascript" src="{{ url_for('static', filename='cropper.js') }}"></script>
34
+
35
+ <canvas id="testCanvas" width="600" height="600" style="border: 1px solid black;" >Your browser does not support canvas.</canvas>
36
+
37
+
38
+
39
+ <script type="text/javascript"> cropper.start(document.getElementById("testCanvas"), 1);
40
+
41
+ function handleFileSelect() {
42
+
43
+ var file = document.getElementById("fileInput").files[0];
44
+
45
+ var reader = new FileReader();
46
+
47
+ reader.onload = function(event) {
48
+
49
+ var data = event.target.result;
50
+
51
+ cropper.showImage(data);
52
+
53
+ };
54
+
55
+
56
+
57
+ reader.readAsDataURL(file);
58
+
59
+ }
60
+
61
+ </script>
62
+
63
+ <input type="file" id="fileInput" onchange="handleFileSelect()" />
64
+
65
+ <input type="button" onclick="cropper.startCropping()" value="Start cropping" />
66
+
67
+ <input type="button" onclick="cropper.getCroppedImageSrc()" value="Crop" />
68
+
69
+ <input type="button" onclick="cropper.restore()" value="Restore" />
70
+
71
+
72
+
73
+ {% endblock %}
74
+
75
+ ```
76
+
77
+ 以下がextend すると問題を起こすbase.htmlです
78
+
79
+ ```html
80
+
81
+ <!-- base.html. -->
82
+
83
+ {% extends "bootstrap/base.html" %}
84
+
85
+ {% block content %}
86
+
87
+ <div class="container">
88
+
89
+ {% block page_content %}{% endblock %}
90
+
91
+ </div>
92
+
137
93
  {% endblock %}
138
94
 
139
95
  ```