HTML5 Canvas 创建的 JPEG 是 "corrupt" 还是 "damaged"？

Question

我有一个简单的 HTML5 Canvas object，一旦保存到文件中，就可以在 Photoshop 中完美打开并且看起来正确，但是根据 Windows 和 OSX 是 "corrupted" 或 "damaged"。

我使用的代码非常简单：

JavaScript:

var dataURL = canvas.toDataURL({
    format: 'jpeg',
    quality: 0.8
});

然后通过 AJAX 发送 dataURL:

      $.ajax({
         type: "POST",
         url: "scripts/saveImage.php",
         data: {
            imgBase64: dataURL
         }
      })

到一个简单的 PHP 脚本：

$imageBase64 = $_POST['imgBase64'];
$imageData = base64_decode($imageBase64);
file_put_contents($fileName,$imageData);

文件已创建。我可以在 Photoshop 中打开它，它看起来完全符合预期。十六进制编辑器显示在其 header 中有 JFIF，这也符合您对 JPEG 的预期：

但是无法在Windows或OSX预览中打开文件：

我是不是做错了什么？文件 header 中是否有某些东西正在丢弃 Windows/OSX？或者以这种方式创建的 JPEG 的预期行为？

Answer 1

我遇到了同样的问题，原来 "dataURL" 以 data:image/png;base64, 开头，这混淆了 reader 程序，例如 windows 媒体查看器等

为了解决这个问题，我使用了这段代码

$file = base64_decode(str_replace(' ', '+', str_replace('data:image/png;base64,', '', \Input::data('base64image'))));

我想你必须将其更改为

$file = base64_decode(str_replace(' ', '+', str_replace('data:image/jpeg;base64,', '', $_POST['imgBase64'])));

老实说，我不记得第一个 str_replace 的目的是什么，这就是我将它包含在答案中的原因，因为如果我删除它可能会破坏某些东西。

HTML5 Canvas created JPEG is "corrupt" or "damaged"?