Line 0
Link Here
|
|
|
1 |
[% USE Koha %] |
2 |
|
3 |
[% IF ( Koha.Preference('patronimages') ) %] |
4 |
[% IF ( CAN_user_tools_batch_upload_patron_images ) %] |
5 |
<div id="manage-patron-image" class="patroninfo-section" style="float:up"> |
6 |
<form method="post" id="picture-upload" action="/cgi-bin/koha/tools/picture-upload.pl" enctype="multipart/form-data"> |
7 |
[% IF ( patron.image ) %] |
8 |
<div class="hint">To update the image for [% patron.title | html %] [% patron.firstname | html %] [% patron.surname | html %], select a new image file and click 'Upload.' <br />Click the 'Delete' button to remove the current image.</div> |
9 |
[% ELSE %] |
10 |
<div class="hint">[% patron.title | html %] [% patron.firstname | html %] [% patron.surname | html %] does not currently have an image available. To import an image for [% patron.title | html %] [% patron.firstname | html %] [% patron.surname | html %], enter the name of an image file to upload.</div> |
11 |
[% END %] |
12 |
<p>Only PNG, GIF, JPEG, XPM formats are supported.</p> |
13 |
<label for="uploadfile">Select the file to upload: </label> |
14 |
<input type="file" id="uploadfile" name="uploadfile" required="required" /> |
15 |
<div class="action"> |
16 |
<input type="hidden" id="csrf_token" name="csrf_token" value="[% csrf_token | html %]" /> |
17 |
<input type="hidden" id="image" name="filetype" value="image" /> |
18 |
<input type="hidden" id="cardnumber" name="cardnumber" value="[% patron.cardnumber | html %]" /> |
19 |
<input type="hidden" id="borrowernumber" name="borrowernumber" value="[% patron.borrowernumber | html %]" /> |
20 |
<button type="submit" class="btn btn-default btn-xs"><i class="fa fa-upload"></i> Upload</button> |
21 |
<input name="op" type="hidden" value="Upload" /> |
22 |
[% IF ( patron.image ) %] |
23 |
<a id="delpicture" href="/cgi-bin/koha/tools/picture-upload.pl?op=Delete&borrowernumber=[% patron.borrowernumber | html %]&csrf_token=[% csrf_token | html %]" class="btn btn-default btn-xs delete"><i class="fa fa-trash"></i> Delete</a> |
24 |
[% END %] |
25 |
</div> |
26 |
</form> |
27 |
</div> |
28 |
<div id="capture-patron-image" class="patroninfo-section"> |
29 |
<form> |
30 |
<!-- 240 is the fixed width. See Javascript rheight calculations. --> |
31 |
<div id="liveFeed" style="float:left" width="260px"> |
32 |
<video width="240px" height="180px" id="videoFeed" style="float:left; width:240px !important; height:180px !important"></video> |
33 |
</div> |
34 |
<div id="captured-image" style="float:right" width="260px"> |
35 |
<canvas width="240px" id="canvas" style="display:none"></canvas> |
36 |
<img width="240px" height="180px" id="picture" src=""> |
37 |
</div> |
38 |
<hr> |
39 |
<div id="capture-controls" style="display:block"> |
40 |
<button id="webcam_off" type="button" onclick="turn_off();">Off</button> |
41 |
<button id="webcam_on" type="button" onclick="turn_on();">On</button> |
42 |
<button id="webcam_capture" type="button" onclick="take_picture();"> |
43 |
Take |
44 |
</button> |
45 |
<button id="webcam_save" type="button" onclick="save_picture();"> |
46 |
Keep |
47 |
</button> |
48 |
</div> |
49 |
</form> |
50 |
</div> |
51 |
[% END %] |
52 |
[% END %] |
53 |
|
54 |
<script> |
55 |
function turn_on() { |
56 |
// Detect camera |
57 |
navigator.getMedia = ( navigator.getUserMedia || |
58 |
navigator.webkitGetUserMedia || |
59 |
navigator.mozGetUserMedia || |
60 |
navigator.msGetUserMedia ); |
61 |
if (navigator.getMedia) { |
62 |
// keep it on, and set object sizes |
63 |
navigator.getMedia( |
64 |
{video: true}, |
65 |
function(stream) { |
66 |
var takebutton = document.getElementById('webcam_capture'); |
67 |
var savebutton = document.getElementById('webcam_save'); |
68 |
var video = document.getElementById('videoFeed'); |
69 |
var canvas = document.getElementById('canvas'); |
70 |
var picture = document.getElementById('picture'); |
71 |
video.srcObject = stream; |
72 |
video.autoplay = true; |
73 |
// use 200ms timeout to set because mobile switches height/width |
74 |
// until used and the videoWidth and videoHeight are checked |
75 |
setTimeout(function(){ |
76 |
width = video.videoWidth; |
77 |
height = video.videoHeight; |
78 |
var ratio = height.toFixed(6)/width.toFixed(6); |
79 |
var rheight = 240 * ratio; |
80 |
video.height = rheight; |
81 |
canvas.height = rheight; |
82 |
picture.height = rheight; |
83 |
takebutton.disabled = false; |
84 |
}, 200); |
85 |
}, |
86 |
function() { |
87 |
alert('Webcam not detected or permission denied!'); |
88 |
} |
89 |
); |
90 |
} else { |
91 |
alert('Webcam not detected or permission denied!'); |
92 |
} |
93 |
} |
94 |
|
95 |
function turn_off() { |
96 |
var takebutton = document.getElementById('webcam_capture'); |
97 |
var savebutton = document.getElementById('webcam_save'); |
98 |
var picture = document.getElementById('picture'); |
99 |
var video = document.getElementById('videoFeed'); |
100 |
var stream = video.srcObject; |
101 |
if (stream) { |
102 |
stream.getTracks().forEach(function(track) { |
103 |
track.stop(); |
104 |
}); |
105 |
} |
106 |
video.srcObject = null; |
107 |
video.autoplay = false; |
108 |
takebutton.disabled = true; |
109 |
} |
110 |
|
111 |
function take_picture() { |
112 |
var savebutton = document.getElementById('webcam_save'); |
113 |
var video = document.getElementById('videoFeed'); |
114 |
var stream = video.srcObject; |
115 |
var canvas = document.getElementById('canvas'); |
116 |
var context = canvas.getContext("2d"); |
117 |
var picture = document.getElementById('picture'); |
118 |
context.drawImage( video, 0, 0, picture.width, picture.height); |
119 |
picture.src = canvas.toDataURL('image/jpeg'); |
120 |
savebutton.disabled = false; |
121 |
} |
122 |
|
123 |
function save_picture() { |
124 |
// gather form data for AJAX POST |
125 |
var data = new FormData(); |
126 |
data.append("uploadfiletext", picture.src ); |
127 |
data.append("csrf_token", $("#csrf_token").val() ); |
128 |
data.append("filetype", "image" ); |
129 |
data.append("uploadfilename", "patron-photo.jpg" ); |
130 |
data.append("cardnumber", $("#cardnumber").val() ); |
131 |
data.append("borrowernumber", $("#borrowernumber").val() ); |
132 |
data.append("op", "Upload" ); |
133 |
$.ajax({ |
134 |
type: "POST", |
135 |
url: "/cgi-bin/koha/tools/picture-upload.pl", |
136 |
data: data, |
137 |
cache: false, |
138 |
contentType: false, |
139 |
processData: false |
140 |
}).done(function() { |
141 |
// turn off video nicely if it is still on. |
142 |
var video = document.getElementById('videoFeed'); |
143 |
var stream = video.srcObject; |
144 |
if (stream) { |
145 |
stream.getTracks().forEach(function(track) { |
146 |
if (track.readyState == 'live' && track.kind === 'video') { |
147 |
track.stop(); |
148 |
} |
149 |
}); |
150 |
} |
151 |
location.reload(); |
152 |
}); |
153 |
} |
154 |
</script> |
155 |
<script> |
156 |
//if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
157 |
// navigator.mediaDevices.getUserMedia(mediaConfig).then( |
158 |
// function(stream) { |
159 |
// video.srcObject = stream; |
160 |
// video.play(); |
161 |
// } |
162 |
// ); |
163 |
//} |
164 |
|
165 |
var takepicture = document.getElementById('webcam_capture'); |
166 |
var savepicture = document.getElementById('webcam_save'); |
167 |
savepicture.disabled = true; |
168 |
|
169 |
// Detect camera |
170 |
navigator.getMedia = ( navigator.getUserMedia || |
171 |
navigator.webkitGetUserMedia || |
172 |
navigator.mozGetUserMedia || |
173 |
navigator.msGetUserMedia ); |
174 |
// If no camera... |
175 |
if (! navigator.getMedia) { |
176 |
// Disable the buttons. |
177 |
var webcamoff = document.getElementById('webcam_off'); |
178 |
var webcamon = document.getElementById('webcam_on'); |
179 |
webcamon.disabled = true; |
180 |
webcamoff.disabled = true; |
181 |
takepicture.disabled = true; |
182 |
document.getElementById('capture-patron-image').style.visibility = "hidden"; |
183 |
document.getElementById('capture-patron-image').remove(); |
184 |
} else { |
185 |
// If camera... |
186 |
// keep it on and set objects height and width |
187 |
navigator.getMedia( |
188 |
{video: true}, |
189 |
function(stream) { |
190 |
var video = document.getElementById('videoFeed'); |
191 |
var canvas = document.getElementById('canvas'); |
192 |
var picture = document.getElementById('picture'); |
193 |
video.srcObject = stream; |
194 |
video.autoplay = true; |
195 |
// use 200ms timeout to set because mobile switches height/width |
196 |
// until used and the videoWidth and videoHeight are checked |
197 |
setTimeout(function(){ |
198 |
var width = video.videoWidth; |
199 |
var height = video.videoHeight; |
200 |
var ratio = height.toFixed(6)/width.toFixed(6); |
201 |
var rheight = 240 * ratio; |
202 |
video.height = rheight; |
203 |
canvas.height = rheight; |
204 |
picture.height = rheight; |
205 |
takepicture.disabled = false; |
206 |
}, 200); |
207 |
}, |
208 |
function() { |
209 |
alert('Webcam not detected or permission denied!'); |
210 |
} |
211 |
); |
212 |
} |
213 |
</script> |
214 |
</html> |