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

我有一个简单的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的预期行为？

最佳答案

我遇到了同样的问题，原来以

我想你必须将其更改为

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

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

关于javascript - HTML5 Canvas创建的JPEG是“损坏”还是“损坏”？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30561644/