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