Canvas的ToDataURL（JavaScript）在通过PHP上传到服务器后正在创建一个损坏的PNG文件

我试图给出一个在JSFIDLE上运行的代码示例，但我只能将图像的dataURL输入到输入中。（JS Fiddle:）（编辑：我可以创建一个链接，将您发送到DataURL图像。）

这是损坏图像的副本（如果您尝试在photoshop中打开，它将无法工作，并给出错误：“无法完成您的请求，因为文件格式模块无法解析文件”）：

或查看原始照片的副本

以下是我的JavaScript代码（与我的实际网页上的代码相同）：

然后我的PHP代码将图像下载到我的服务器上：

$img = $_POST['dataurl_image'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $fileData = base64_decode($img);
        //saving
        $fileName = 'photos.png';
        file_put_contents(WEBSITE_URL.'/Driving Log/tmp/'.$fileName, $fileData);

然而，我几乎可以肯定这是由于PHP错误造成的，因为如果我将DataURL代码直接放入URL栏，并手动保存图像，我可以在PhotoShop中打开它。我只是想不出那个错误是什么

其他一些信息：

• 该图像似乎被正确创建，例如，我可以在Windows照片查看器中打开它，并可以在我的网站上的标签中显示它

---

• 如果我在MS Paint中打开并保存图像，则图像不会被损坏

• 我还尝试使用以下PHP代码创建图像，但也不起作用：
  $image\u url=$\u POST['dataurl\u image']； $image=@file\u get\u contents（$image\u url）； $filename='uniqqid.png'； 文件内容（网站URL./Driving Log/tmp/.$filename，$image）

• 当我使用以下JS代码（而不是上面的代码）时，该图像未被损坏：
  var canvas=$（“#chartContainer.canvasjs chart canvas”）.get（0）； var dataURL=canvas.toDataURL（'image/png'）； log（dataURL）； $（“#btn下载”）.attr（“href”，数据URL）； $（“.dataurl”）.val（dataurl）

另外，请注意：我正在本地主机Wamp服务器上尝试所有这些代码，如果这有什么不同的话

---

谢谢大家!

这是由于Google Chrome限制了输入（type=text）标记中允许的字符数。我的DataURL代码接近600000个字符，但输入将代码截断为小于该数字，这导致我的图像损坏

为了解决这个问题，我进入了我的JS代码，并试图缩短DataURL代码

因此，不是：

var-dataURL=battlecanvas.toDataURL（“image/png”）

我用过：

var-dataURL=battlecanvas.toDataURL（“image/jpeg”，0.5）

它还将字符数缩减到10万个以下

这允许将完整的DataURL代码传递到我的PHP服务器，然后允许我创建一个未损坏的图像。
您发布的1cqZq.png文件已被截断。它以部分完整的IDAT块结束，没有IEND块。好吧，听起来很难听。你认为这与PHP代码保存toDataUrl代码的方式有关吗？顺便问一下，你怎么知道PNG的一部分被截断了？我运行了ImageMagick的“identify-verbose file.PNG”和“pngcheck-v file.PNG”。“如果我在MS Paint中打开并保存图像，那么图像就不会被破坏”——不是真的。应用程序是他们认为合适的任何方式。这包括未能打开图像（如Photoshop所做）和继续使用部分数据（MS Paint）。谢谢@Kelsey。你救了我一天：）
$img = $_POST['dataurl_image'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $fileData = base64_decode($img);
        //saving
        $fileName = 'photos.png';
        file_put_contents(WEBSITE_URL.'/Driving Log/tmp/'.$fileName, $fileData);