將畫布保存爲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中，並且您可以看到您是否得到了想要的而不是猜測。

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