Question

我正在创建学校的注册资料以招收孩子。我使用以下代码使用网络摄像头捕获了照片：

<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进行打印和/或发送电子邮件（取决于用户）。

我不知道如何实现这一目标。在决定就Stack溢出问题咨询专家之前，我已经搜索并尝试了各种方法。

这是我最近的尝试失败。

在捕获页面上：

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中显示

请帮助？

如何将网络摄像头图像拍摄到tcpdf以进行打印和发送电子邮件

0 个答案: