質問編集履歴
3
javascript全文を追加。 スタックオーバーフローでの解決策を追加。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -72,7 +72,91 @@
|
|
|
72
72
|
#追記のjavascriptファイル
|
|
73
73
|
set attribute 'src'をしないと、写真を撮った後に、撮影されたフレームが画面に表示されないので、２つset attribute しています。
|
|
74
74
|
```javascript
|
|
75
|
+
(function() {
|
|
76
|
+
// The width and height of the captured photo. We will set the
|
|
77
|
+
// width to the value defined here, but the height will be
|
|
78
|
+
// calculated based on the aspect ratio of the input stream.
|
|
79
|
+
|
|
80
|
+
var width = 320; // We will scale the photo width to this
|
|
81
|
+
var height = 0; // This will be computed based on the input stream
|
|
82
|
+
|
|
83
|
+
// |streaming| indicates whether or not we're currently streaming
|
|
84
|
+
// video from the camera. Obviously, we start at false.
|
|
85
|
+
|
|
86
|
+
var streaming = false;
|
|
87
|
+
|
|
88
|
+
// The various HTML elements we need to configure or control. These
|
|
89
|
+
// will be set by the startup() function.
|
|
90
|
+
|
|
91
|
+
var video = null;
|
|
92
|
+
var canvas = null;
|
|
93
|
+
var photo = null;
|
|
94
|
+
var startbutton = null;
|
|
95
|
+
var webimg=null;
|
|
96
|
+
|
|
97
|
+
function startup() {
|
|
98
|
+
video = document.getElementById('video');
|
|
99
|
+
canvas = document.getElementById('canvas');
|
|
100
|
+
photo = document.getElementById('photo');
|
|
101
|
+
webimg= document.getElementById('webimg')
|
|
102
|
+
startbutton = document.getElementById('startbutton');
|
|
103
|
+
|
|
104
|
+
navigator.mediaDevices.getUserMedia({video: true, audio: false})
|
|
105
|
+
.then(function(stream) {
|
|
106
|
+
video.srcObject = stream;
|
|
107
|
+
video.play();
|
|
108
|
+
})
|
|
109
|
+
.catch(function(err) {
|
|
110
|
+
console.log("An error occurred: " + err);
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
video.addEventListener('canplay', function(ev){
|
|
114
|
+
if (!streaming) {
|
|
115
|
+
height = video.videoHeight / (video.videoWidth/width);
|
|
116
|
+
|
|
117
|
+
// Firefox currently has a bug where the height can't be read from
|
|
118
|
+
// the video, so we will make assumptions if this happens.
|
|
119
|
+
|
|
120
|
+
if (isNaN(height)) {
|
|
121
|
+
height = width / (4/3);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
video.setAttribute('width', width);
|
|
125
|
+
video.setAttribute('height', height);
|
|
126
|
+
canvas.setAttribute('width', width);
|
|
127
|
+
canvas.setAttribute('height', height);
|
|
128
|
+
streaming = true;
|
|
129
|
+
}
|
|
130
|
+
}, false);
|
|
131
|
+
|
|
132
|
+
startbutton.addEventListener('click', function(ev){
|
|
133
|
+
takepicture();
|
|
134
|
+
ev.preventDefault();
|
|
135
|
+
}, false);
|
|
136
|
+
|
|
137
|
+
clearphoto();
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Fill the photo with an indication that none has been
|
|
141
|
+
// captured.
|
|
142
|
+
|
|
143
|
+
function clearphoto() {
|
|
144
|
+
var context = canvas.getContext('2d');
|
|
145
|
+
context.fillStyle = "#AAA";
|
|
146
|
+
context.fillRect(0, 0, canvas.width, canvas.height);
|
|
147
|
+
|
|
148
|
+
var data = canvas.toDataURL('image/png');
|
|
149
|
+
console.log(data);
|
|
150
|
+
photo.setAttribute('src', data);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
// Capture a photo by fetching the current contents of the video
|
|
154
|
+
// and drawing it into a canvas, then converting that to a PNG
|
|
155
|
+
// format data URL. By drawing it on an offscreen canvas and then
|
|
156
|
+
// drawing that to the screen, we can change its size and/or apply
|
|
157
|
+
// other changes before drawing it.
|
|
158
|
+
|
|
75
|
-
function takepicture() {
|
|
159
|
+
function takepicture() {
|
|
76
160
|
// var context = canvas.getContext('2d');
|
|
77
161
|
var context = canvas.getContext('2d');
|
|
78
162
|
if (width && height) {
|
|
@@ -82,11 +166,16 @@
|
|
|
82
166
|
|
|
83
167
|
var data = canvas.toDataURL('image/png');
|
|
84
168
|
photo.setAttribute('src', data);
|
|
85
|
-
|
|
169
|
+
webimg.setAttribute('webimg',data);
|
|
86
170
|
} else {
|
|
87
171
|
clearphoto();
|
|
88
172
|
}
|
|
89
173
|
}
|
|
174
|
+
|
|
175
|
+
// Set up our event listener to run the startup process
|
|
176
|
+
// once loading is complete.
|
|
177
|
+
window.addEventListener('load', startup, false);
|
|
178
|
+
})();
|
|
90
179
|
```
|
|
91
180
|
|
|
92
181
|
#追記のhtml ファイル
|
|
@@ -109,3 +198,5 @@
|
|
|
109
198
|
<button type="submit" class="button" id="submit">Submit</button>
|
|
110
199
|
</form>
|
|
111
200
|
```
|
|
201
|
+
#スタックオーバーフローでコメントされていた解決策。具体例がなく試行錯誤したのですが、解決できませんでした。
|
|
202
|
+
|
2
追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -69,3 +69,43 @@
|
|
|
69
69
|
|
|
70
70
|
|
|
71
71
|
```
|
|
72
|
+
#追記のjavascriptファイル
|
|
73
|
+
set attribute 'src'をしないと、写真を撮った後に、撮影されたフレームが画面に表示されないので、２つset attribute しています。
|
|
74
|
+
```javascript
|
|
75
|
+
function takepicture() {
|
|
76
|
+
// var context = canvas.getContext('2d');
|
|
77
|
+
var context = canvas.getContext('2d');
|
|
78
|
+
if (width && height) {
|
|
79
|
+
canvas.width = width;
|
|
80
|
+
canvas.height = height;
|
|
81
|
+
context.drawImage(video, 0, 0, width, height);
|
|
82
|
+
|
|
83
|
+
var data = canvas.toDataURL('image/png');
|
|
84
|
+
photo.setAttribute('src', data);
|
|
85
|
+
photo.setAttribute('webimg',data);
|
|
86
|
+
} else {
|
|
87
|
+
clearphoto();
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
#追記のhtml ファイル
|
|
93
|
+
ここの input id ='webimg'のところがわかってないです。
|
|
94
|
+
```python
|
|
95
|
+
<form method="POST" name="inputForm" text="" enctype='multipart/form-data'>
|
|
96
|
+
{% csrf_token %}
|
|
97
|
+
<div id="camera" class="camera">
|
|
98
|
+
<video id="video">Video stream not available.</video>
|
|
99
|
+
<button id="startbutton" type="button">Take photo</button>
|
|
100
|
+
<input id="webimg" value="" name="src" type="text" style="display: none;">
|
|
101
|
+
<canvas id="canvas">
|
|
102
|
+
</canvas>
|
|
103
|
+
</div>
|
|
104
|
+
<br>
|
|
105
|
+
<div>
|
|
106
|
+
<img id="photo" alt="your image">
|
|
107
|
+
</div>
|
|
108
|
+
<br>
|
|
109
|
+
<button type="submit" class="button" id="submit">Submit</button>
|
|
110
|
+
</form>
|
|
111
|
+
```
|
1
errorの追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -35,3 +35,37 @@
|
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
```
|
|
38
|
+
|
|
39
|
+
＃追記
|
|
40
|
+
現在出ているエラーは、'NoneType' object has no attribute 'timeoutです。
|
|
41
|
+
```python
|
|
42
|
+
def image_upload(request):
|
|
43
|
+
context = dict()
|
|
44
|
+
if request.method == 'POST':
|
|
45
|
+
|
|
46
|
+
username = request.POST.get("username")
|
|
47
|
+
webimg = urlopen(request.POST.get("webimg"))
|
|
48
|
+
data = webimg.read()
|
|
49
|
+
image = ContentFile( data, "webcam.jpg" )
|
|
50
|
+
|
|
51
|
+
# image_path = request.POST.get("webimg") # src is the name of input attribute in your html file, this src value is set in javascript code
|
|
52
|
+
# image = NamedTemporaryFile()
|
|
53
|
+
# image.write(urlopen(image_path).read())
|
|
54
|
+
# image.flush()
|
|
55
|
+
# image = File(image)
|
|
56
|
+
# name = str(image.name).split('\\')[-1]
|
|
57
|
+
# name += '.jpg' # store image in jpeg format
|
|
58
|
+
# image.name = name
|
|
59
|
+
|
|
60
|
+
if image is not None:
|
|
61
|
+
obj = Image.objects.create(username=username, image=image) # create a object of Image type defined in your model
|
|
62
|
+
obj.save()
|
|
63
|
+
context["path"] = obj.image.url #url to image stored in my server/local device
|
|
64
|
+
context["username"] = obj.username
|
|
65
|
+
else :
|
|
66
|
+
return redirect('/')
|
|
67
|
+
return redirect('any_url')
|
|
68
|
+
return render(request, 'index.html', context=context) # context is like respose data we are sending back to user, that will be rendered with specified 'html file'.
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
```
|