javascript - Are canvas.toDataURL compatible with PHP's base64_decode? -

my problem follows... have screen in user can select png image computer, using this:

<input id='icon' type='file' accept='image/png' style='width:400px; height:20px' onchange='llenarthumbnail(this)'> <img id='thumb' src='#'> 

when user selects image, thumbnail shown automatically, using onclick='llenar thumbnail(this)', this:

function llenarthumbnail(input){  if (input.files && input.files[0]){   var reader = new filereader();   reader.onload = function (e){    $('#thumb').attr('src', e.target.result).width(48).height(48);   };   reader.readasdataurl(input.files[0]);  } } 

then, when user clicks on proper button upload image (not submit button), following encode image base64:

function getbase64image(img){  var canvas = document.createelement("canvas");  canvas.width = img.width;  canvas.height = img.height;  var ctx = canvas.getcontext("2d");  ctx.drawimage(img, 0, 0);  var dataurl = canvas.todataurl("image/png");  console.log(dataurl);  return dataurl.replace(/^data:image\/(png|jpg);base64,/, ""); } 

then, using ajax send encoded image data server, , php script following:

$binary=base64_decode($imagen_data); header('content-type: bitmap; charset=utf-8'); $file = fopen($icono, 'wb'); fwrite($file, $binary); fclose($file); 

as printing diferent alerts along process, see encoding performing (i'm not sure if correctly or not), , php receives data , creates png file, when open image, image empty, there's no data... thats why i'm asking if methods compatible... guess because they're both base64... if not this, doing wrong???

please, i'm tired of looking on internet! need answers! thank you!

without seeing ajax post, here's wild guess:

try leaving prefix on until url gets php.

which php server using?

some other usual gotchas:

• make sure have set upload directory.
• make sure have permissions set on upload directory.

client side:

// create dataurl canvas var dataurl= canvas.todataurl();  // post dataurl php $.ajax({   type: "post",   url: "upload.php",   data: {image: dataurl} }).done(function( respond ) {   // temp file name   // or "unable save image."   console.log(respond); }); 

server file: upload.php

<?php  // make sure image-data exists , not empty // php particularly sensitive empty image-data  if ( isset($_post["image"]) && !empty($_post["image"]) ) {          // dataurl     $dataurl = $_post["image"];        // dataurl has prefix (mimetype+datatype)      // don't want, strip prefix off     $parts = explode(',', $dataurl);       $data = $parts[1];        // decode base64 data, resulting in image     $data = base64_decode($data);        // create temporary unique file name     $file = upload_dir . uniqid() . '.png';      // write file upload directory     $success = file_put_contents($file, $data);      // return temp file name (success)     // or return error message frustrate user (kidding!)     print $success ? $file : 'unable save image.';  }