HTML5 Canvas 创建的 JPEG 是“损坏”还是“损坏”？

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 中打开它，它看起来完全符合预期。十六进制编辑器显示其标题中包含 JFIF，这与您对 JPEG 的期望一样：

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

我做错了什么吗？文件头中是否有一些东西让 Windows/OSX 无法正常工作？还是以这种方式创建的 JPEG 的预期行为？

Answer 1

我遇到了同样的问题，原来“dataURL”以 data:image/png;base64, 开头，这让 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 的目的是什么，这就是我将它包含在答案中的原因，因为如果我删除它可能会破坏某些东西。