|
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> |