从视频在画布上绘制图像->将画布另存为文件(返回黑色图像)

时间:2019-02-12 13:18:13

标签: javascript php jquery html html5-canvas

我需要从刚通过fileupload上传的视频中捕获一个帧,该文件是我用画布创建的,并在视频上绘制了一个帧->

我可以使用Ajax调用php脚本来保存图像。但这是全黑的,这是我的代码:

JS:

28px * 28px

PHP:

 var $theImg = $('<video id="video" preload="metadata" src="http://localhost/screens/page/VIDEO/vids/'+file.name+'"></video>');
                        $theImg.attr('data-disp', name);
                        $theImg.attr('data-name', file.name);
                        $theImg.attr('data-created', 1);
                        $theImg.appendTo('#selectable-videos');
                        $theImg.addClass('selectable-image');
                        $(e.target).parent().parent().find('.modal-body').children().append($theImg);
                    ///////////////////////////////////////////////////////////////////////////////////////////////
                    var $canvas = $('<canvas id="canvas" width="192" height="108"></canvas>');
                    $theImg.append($canvas);

                    var video = $('#video');
                    var canvas = $('#canvas');

                    if(video.length){
                        var ctx = canvas[0].getContext('2d').drawImage($theImg.get(0), 0, 0, canvas.width, canvas.height);

                        var dataURL = canvas[0].toDataURL('image/png');

                        $.ajax({
                            url: "../admin/php/folder.php",
                            timeout: 5000,
                            method: "POST",
                            data: { data: dataURL, DISPLAYNAME: fullName, ACTUALNAME: name, FILE_TYPE: 'poster', action: "save-poster" },
                            success: function(data) {
                                console.log("poster created.");
                            }
                        });
                    }

有人知道为什么它会全黑吗?谢谢

0 个答案:

没有答案
相关问题