将画布保存为 PNG 或 JPEG 文件答案

【问题标题】：Saving a canvas to a PNG or JPEG file将画布保存为 PNG 或 JPEG 文件
【发布时间】：2016-01-28 08:30:15
【问题描述】：

我目前正在编写一个网站，用户可以在其中上传 .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>

我处理画布等的 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.';
?>

有人可以帮助我吗？ :)

【问题讨论】：

php.net/manual/en/function.error-reporting.php 并检查您的控制台。
您在尝试此操作时遇到什么错误？您可以通过 FTP 或其他方式查看图像文件，还是该文件作为图像文件不正确存在？
嗨，Jake，我在执行程序时没有收到任何错误。我可以在 FTP 服务器上看到文件及其大小。但是当我用windows打开它时，它说该文件无法识别。这是我从 'canvas.toDataURL('image/png');' 得到的数据data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAFoCAYAAADHMkpRAAASdklEQVR4Xu3WQQEAAAgCMelf2iA3GzB8sHMECBAgQIAAAQIpgaXSCk（以及更多字符）

标签： javascript php html canvas

【解决方案1】：

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

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

除此之外，我什么也找不到。

【讨论】：

嗨 Blindman67，当我将“onloadedmetadata”更改为“oncanplay”或“canplay”时，程序进入了一个没有结束的循环。所以我将我的可以播放更改为“onloadedmetadata”我添加了你建议显示图像的行，现在我看到 Base64 编码只给了我一个 PNG 的空白图像和一个 Jpeg 的黑色图像......我认为必须我认为是 javascript 中的编码有问题
程序进入一个循环，因为draw函数用settimeout调用它自己。改回 oncanplay 并移除设置的超时时间。

【解决方案2】：

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

解决方案是将draw函数之后的所有内容放在write函数中。并给该函数一个 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'); 
    });
}

【讨论】：