在服务器错误上保存图像

Question

I have an ajax fuction to take a div and make it picture and then post it on php for saving it .

<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>

Then i have the save image php to save it on server

<?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;

?>

My problem is although the image is saved on path when i try to open it i get the error the image cannot be displayed because it contains errors Thank you

Answer 1

@aristeidhsP Please check file_put_contents return; is the image really created ? If so you, have to check the content of $imagedata: have you correctly stripped the extra stuff from the image data (your regex may not fire on jpeg or gif extension). Hope this helps