使用AJAX POST传递Canvas生成的dataURL，file_put_contents保存图片损坏

我之前也碰到过一模一样的坑！问题根源在于你直接保存了完整的DataURL字符串，既没处理掉它的前缀标识，也没把base64编码转换成真正的二进制图片数据。

核心原因 #

Canvas生成的DataURL格式是这样的：data:image/png;base64,xxxxxx...，其中前面的data:image/png;base64,只是格式标识，不属于图片的实际编码内容。在线转换工具会自动识别并跳过这段前缀，但PHP的file_put_contents如果直接写入整个字符串，相当于把这段文本也塞进了文件里，自然会导致图片格式损坏。

另外还要注意：AJAX传输数据时，可能会把base64里的+字符转成空格，这也会导致后续解码失败。

解决步骤（附代码示例） #

你需要对后端收到的字符串做三步关键处理，再执行保存：

1. 剥离DataURL的前缀标识
2. 修复被转义的特殊字符
3. 把base64字符串解码为二进制数据后再写入文件

// 假设从POST请求中获取到的图片数据字段是'canvas_image'
$rawData = $_POST['canvas_image'];

// 1. 移除DataURL前缀（适配所有图片格式：png/jpeg/webp等）
$cleanData = preg_replace('#^data:image/[^;]+;base64,#', '', $rawData);

// 2. 修复AJAX传输中被转成空格的'+'字符
$cleanData = str_replace(' ', '+', $cleanData);

// 3. 解码为二进制图片数据
$imageBinary = base64_decode($cleanData);

// 4. 保存到文件
if ($imageBinary !== false) {
    file_put_contents('saved_image.png', $imageBinary);
    echo "图片保存成功！";
} else {
    echo "base64解码失败，请检查数据格式是否正确！";
}

额外提示 #

• 如果你的Canvas生成的是JPEG格式，记得把保存的文件名后缀改成.jpg，保持格式一致。
• 可以通过var_dump($cleanData)检查处理后的字符串，确保没有残留前缀或异常字符。

内容的提问来源于stack exchange，提问作者Diablo Rodriguez