Javascript 在服务器上保存图像错误

我有一个ajax功能，可以拍摄一个div并将其制作成图片，然后将其发布到php上保存

<script>
 $("#capture").click(function() { 
html2canvas([document.getElementById('printableArea')], {
    onrendered: function (canvas) {
        var imagedata = canvas.toDataURL('image/png');
        var imgdata = imagedata.replace(/^data:image\/(png|jpg);base64,/, "");
        //ajax call to save image inside folder
        $.ajax({
            url: 'save_image.php',
            data: {
                   imgdata:imgdata
                   },
            type: 'post',
            success: function (response) {   
               console.log(response);
               $('#image_id img').attr('src', response);
            }
        });
    }
})
 });
</script>

$（“#捕获”）。单击（函数（）{
html2canvas（[document.getElementById（'printableArea'）]{
onrendered：函数（画布）{
var imagedata=canvas.toDataURL（'image/png'）；
var imgdata=imagedata.replace（/^data:image\/（png | jpg）；base64，/，“”）；
//ajax调用将图像保存在文件夹中
$.ajax({
url:“save_image.php”，
数据：{
imgdata:imgdata
},
键入：“post”，
成功：功能（响应）{
控制台日志（响应）；
$（'#image_id img'）.attr（'src'，response）；
}
});
}
})
});

然后，我将保存图像php保存到服务器上

<?php
$imagedata = base64_decode($_POST['imgdata']);
$filename = md5(uniqid(rand(), true));
//path where you want to upload image
$file = '/home/a7784524/public_html/barcodeimage/'.$filename.'.png';
$imageurl  = 'http://panosmoustis.netai.net/barcodeimage/'.$filename.'.png';
file_put_contents($file,$imagedata);
echo $imageurl;

?>

我的问题是，当我尝试打开图像时，虽然图像保存在路径上，但我得到错误，因为图像包含错误，所以无法显示

---

谢谢

@aristeidhsP请检查文件内容返回；这个形象真的被创造出来了吗？ 如果是这样，您必须检查$imagedata的内容：您是否正确地从图像数据中剥离了额外的内容（您的正则表达式可能不会使用jpeg或gif扩展名）。

---

希望这有帮助

@aristeidhsP请检查文件内容返回；这个形象真的被创造出来了吗？ 如果是这样，您必须检查$imagedata的内容：您是否正确地从图像数据中剥离了额外的内容（您的正则表达式可能不会使用jpeg或gif扩展名）。

---

希望这有帮助

您确定您的正则表达式“有效”吗？您是否尝试按

，

拆分数据URL？（base64中不使用逗号）什么是regex？

/^data:image\/（png | jpg）；base64，/

是一个正则表达式是的，我尝试过，但没有逗号可能的重复项-您确定您的正则表达式是“有效的”吗？您是否尝试按

，

拆分数据URL？（base64中不使用逗号）什么是regex？

/^data:image\/（png | jpg）；base64，/

是一个regexYes，我尝试过，但没有逗号的可能重复项-