javascript - 在服务器上保存图像错误

Question

我有一个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>

然后我有保存图像 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;

?>

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

Answer 1

@aristeidhsP 请检查 file_put_contents 返回；图像真的是被创造出来的吗？ 如果是这样，您必须检查 $imagedata 的内容:您是否正确地从图像数据中删除了额外的内容(您的正则表达式可能无法在 jpeg 或 gif 扩展名上触发)。 希望这有帮助