Как взять изображение с веб-камеры в tcpdf для печати и отправки по электронной почте - PullRequest
1 голос
/ 28 июня 2019

Я создаю профили для школ, чтобы записывать детей. Я делаю снимок с помощью веб-камеры, используя этот код:

<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

Пожалуйста, помогите?

...