Я создаю профили для школ, чтобы записывать детей. Я делаю снимок с помощью веб-камеры, используя этот код:
<tr>
<td style="vertical-align: middle;"><center><video id="video" width="250" height="187" autoplay></video></center></td>
<td style="vertical-align: middle;"><center><button id="snap" class="sexybutton">Capture</button></center></td>
<td style="vertical-align: top;"><center><canvas id="canvas" width="640" height="480"></canvas></center></td>
</tr>
Javascript для захвата:
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function(e) {
console.log('An error has occurred!', e)
};
// Put video listeners into place
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
//video.src = window.URL.createObjectURL(stream);
video.srcObject = stream;
video.play();
});
}
/* Legacy code below! */
else if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(mediaConfig, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(mediaConfig, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
navigator.mozGetUserMedia(mediaConfig, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById('snap').addEventListener('click', function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
Вышеуказанные работы.
Мне нужно взять изображение в tcpdf для печати и / или по электронной почте (зависит от пользователя).
Я понятия не имею, как этого добиться. Я искал и пробовал различные методы, прежде чем решил спросить экспертов о переполнении стека.
Вот моя последняя попытка, которая не удалась.
На странице захвата:
Javascript:
<script type="text/javascript">
function uploadFile(){
var file = _("canvas").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("canvas", file);
var ajax = new XMLHttpRequest();
ajax.open("POST", "TCPDF-master/profiles/my_profile.php");
ajax.send(formdata);
}
</script>
Форма действия на странице захвата:
<input type="submit" value="Print Profile" formaction="TCPDF-master/examples/child_profile.php" id="submit" class="btn">
На TCPDF
$fileName = $_FILES["canvas"]["name"]; // The file name
$fileTmpLoc = $_FILES["canvas"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["canvas"]["type"]; // The type of file it is
$fileSize = $_FILES["canvas"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["canvas"]["error"]; // 0 for false... and 1 for true
$temp = explode(".",$_FILES["canvas"]["name"]);
move_uploaded_file($fileTmpLoc, $filepath);
$childPhoto = move_uploaded_file($fileTmpLoc, $filepath);
А для отображения фото стоит TCPDF:
$pdf->Image($childPhoto, 15, 150, 24, 32, 'png', 'http://www.tcpdf.org', '', true, 150, '', false, false, 1, false, false, false);
Изображение не отображается в TCPDF
Пожалуйста, помогите?