javascript - Save image on server error -

i have ajax fuction take div , make picture , post on php saving .

<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 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 have save image php save on server

<?php $imagedata = base64_decode($_post['imgdata']); $filename = md5(uniqid(rand(), true)); //path want 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 although image saved on path when try open error image cannot displayed because contains errors thank you

@aristeidhsp please check file_put_contents return; image created ? if you, have check content of $imagedata: have correctly stripped stuff image data (your regex may not fire on jpeg or gif extension). hope helps