base64 结果给出黑色图像答案

【问题标题】：base64 result giving black imagebase64 结果给出黑色图像
【发布时间】：2021-08-06 12:41:52
【问题描述】：

这是通过画布从视频中获取图像的代码，但是当我将此 base64 代码保存到图像中时，我得到一个黑色图像。

是什么原因？

我的javascript是

var input = document.getElementById('file1');
input.addEventListener('change', function(event) {
    var file = this.files[0];
    var url = URL.createObjectURL(file);
    var video = document.createElement('video');
    video.src = url;
    var snapshot = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        var img_data = canvas.toDataURL('image/jpg');
        $.ajax({
            type: "POST",
            url: "ImageUpload.php",
            data: 'imgBase64=' + img_data,
            success: function(data) {
                -- -
            }
        });
        video.removeEventListener('canplay', snapshot);
    };
    video.addEventListener('canplay', snapshot);
});

这是 PHP 代码

<?php
$data = $_POST['imgBase64'];
list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);
mkdir("uploads/");
file_put_contents("uploads/".time().'.png', $data);
?>

【问题讨论】：

我注意到，在 javascript 中您引用 image/jpg ... 然后将其保存为 .png ... 我想知道它是否可以像文件扩展名一样简单
试试这个data:{'imgBase64':img_data},
我用这个 data:{'imgBase64':img_data} 替换我的代码，但同样的问题我得到了图像黑色
@Bravo 这不是 JSON。这是一个键/值对，通常是您传递data 的方式。使用 data: 'imgBase64=.. 意味着 OP 在 POST 数据中传递一个未命名的字符串，然后尝试使用 $_POST['imgBase64'] 读取它 - OP 没有传递 imgBase64 参数，所以这是空的（据我了解 php @987654330 @ 有效，但它是有限的）
@freedomn-m my bad ... byt data: 'imgBase64=' + img_data, 将是 application/x-www-form-urlencoded 不是吗？可能需要在请求中设置 mime 类型

标签： javascript php jquery ajax base64

【解决方案1】：

在 Chrome 中（至少），您只能在视频开始播放后从视频中获取快照。

如果您在视频中添加autoplay，然后立即pause()，您可以获得快照。

var input = document.getElementById('file1');
input.addEventListener('change', function(event) {
    var file = this.files[0];
    var url = URL.createObjectURL(file);
    var video = document.createElement('video');

    // autoplay video
    video.setAttribute("autoplay", "autoplay");
    video.src = url;

    // immediately stop the autoplay
    video.pause();


    var snapshot = function() {
       ...
       // no change
    };
    video.addEventListener('canplay', snapshot);

工作小提琴：https://jsfiddle.net/crbv7ezd/1/

【讨论】：