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

Question

我有一个简单的 HTML5 Canvas 对象，一旦保存到文件中，就可以在 Photoshop 中完美打开并且看起来正确，但根据 Windows 和 OSX 的说法是“损坏”或“损坏”。

我使用的代码非常简单:

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 预览中打开该文件:

我做错了什么吗？文件头中有什么东西会影响 Windows/OSX 吗？或者以这种方式创建的 JPEG 的这种预期行为？

Answer 1

我遇到了同样的问题，原来“dataURL”以 data:image/png;base64, 开头，这让 windows media viewer 等阅读器程序感到困惑。

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

$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 的目的是什么，这就是我将它包含在答案中的原因，因为如果我删除它可能会破坏某些东西。