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

Question

我有一个简单的HTML5 Canvas对象，一旦保存到文件中，在Photoshop中打开perfeclty并且看起来正确，但根据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中打开它，它看起来完全符合预期。 HEX编辑器显示其标题中包含JFIF，这也是您对JPEG的期望：

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

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

Answer 1

我遇到了同样的问题，结果发现＆＃34; dataURL＆＃34;从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的目的是什么，这就是我将其包含在答案中的原因，因为如果我删除它可能会破坏某些东西。