javascript - 将 Canvas 保存为 PNG 或 JPEG 文件

Question

我目前正在编写一个网站，用户可以在其中上传 .mp4 视频。我想在用户上传他的视频时制作一个缩略图，并将此图像写入我服务器上的 .jpg 或 .png 文件。

我遇到的问题是该文件存储在我的服务器上，但未将其视为图像文件。

目前这是我的代码。

HTML部分

<canvas id="c"></canvas>
<video id="v" controls>
  <source src="/215003/1.1/videos/7/f9ed57e2b0ee1e87a4cbc17c7b743eff.mp4" type="video/mp4">
</video>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

我处理 Canvas 等的 javascript 部分

document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');

var v = document.getElementById("v");

v.addEventListener('canplay', function() {
 this.currentTime = this.duration / 2;
  }, false);

v.addEventListener( "loadedmetadata", function (e) {
 var cw = this.videoWidth,
     ch = this.videoHeight;
     console.log(cw);
     console.log(ch);
     canvas.width = cw;
     canvas.height = ch;
     draw(this,context,cw,ch);
     var dataURL = canvas.toDataURL('image/png');

    $.ajax({
      type: 'POST',
      url: 'saveThumb.php',
      data: 'img=' + dataURL
    }).done(function(o) {
        console.log(dataURL);
      console.log('saved'); 
    });
 }, false );
},false);
function draw(v,c,w,h) {
  c.drawImage(v,0,0,w,h);
  setTimeout(draw,20,v,c,w,h);
}

用于处理数据和存储图像的 PHP 文件:

<?php
// requires php5
define('UPLOAD_DIR', 'img/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

有人可以帮助我吗？ :)

Answer 1

我很少使用 PHP，但我知道 Base64 编码中没有任何空格。并不是说它会因为没有空格而改变任何东西，但为什么第二个用加号替换空格？

关于你的问题。您需要更改用于触发帖子的事件。 onloadedmetadata 在有任何数据渲染帧之前被触发。您应该使用 oncanplay 然后您将有数据要发送，尽管如此您至少应该得到一个空白图像。要查看客户端上的内容，请添加 'image = new Image(); image.src=dataURL;'然后将该图像添加到 dom，您可以查看是否得到了您想要的而不是猜测。

除此之外我找不到任何东西。