将画布保存为PNG或JPEG文件

Question

我目前正在为用户可以上传.mp4视频的webstie编程。我想在用户上传他的视频时将缩略图制作成我的服务器上的.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> 

其中I处理帆布等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

我终于发现我的错误。问题在于draw函数有一个SetTimeOut函数。所以我只写了一个黑色的图像到我的服务器，因为DataToURL函数触发了快速。

解决方法是将绘图函数中的所有内容放入写入函数中。并给该函数一个timeOut以确保图像被绘制。

以下是更正代码：

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('loadedmetadata', function() { 
this.currentTime = this.duration/3; 
}, false); 
v.addEventListener("loadedmetadata", function() { 
var cw = this.videoWidth; 
var ch = this.videoHeight; 
    console.log(cw); //displaying the width of the video 
    console.log(ch); //displaying the height of the video 
    canvas.width = cw; //seting the width of the canvas 
    canvas.height = ch; //setting the height of the canvas 
    draw(this,context,cw,ch); // Drawing the image from the video onto the canvas 
    setTimeout(function() { 
    write(canvas); 
    }, 1000) 
    }, false); 

},false); 

function draw(v,c,w,h) { 
c.drawImage(v,0,0,w,h); 
setTimeout(draw,20,v,c,w,h); 
} 
function write(c) { 
var dataURL = c.toDataURL('image/jpeg'); 
var image = document.createElement("img"); 
    image.src=dataURL; 
    document.getElementById("placehere").appendChild(image); 
    $.ajax({ 
     type: 'POST', 
     url: 'saveThumb.php', 
     data: 'img=' + dataURL 
    }).done(function(o) { 
     console.log(dataURL); 
     console.log('saved'); 
    }); 
} 

Answer 2

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

至于你的问题。您需要更改您用于触发帖子的活动。在有任何数据要渲染帧之前触发onloadedmetadata。你应该使用oncanplay然后你将有数据发送，但因为它是你应该至少得到一个空白的图像。要查看您在客户端上添加了什么，请添加'image = new Image（）; image.src = dataURL;”然后将该图像添加到dom中，并且您可以看到您是否得到了想要的而不是猜测。

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