canvas.toDataURL是否与PHP的base64_decode兼容？

Question

My problem is as follows... I have a screen in which the user can select a PNG image from its computer, using this:

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

When the user selects the image, a thumbnail is shown automatically, using onclick='llenar Thumbnail(this)', like 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 the user clicks on the proper button to upload the image (not a submit button), I do the following to encode the image into 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 I send this encoded image data to the server, and a PHP script does the following:

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

As I was printing diferent alerts along the process, I could see that the encoding was performing (i'm not so sure if correctly or not), and PHP receives the data and creates the PNG file, but when I open the image, the image is empty, there's no data... Thats why I'm asking if this to methods are compatible... I guess they are because they're both Base64... But if its not this, then what am i doing wrong???

Please, I'm tired of looking for this all over the internet! I need some answers! Thank you!

Answer 1

Without seeing your ajax POST, here's a Wild Guess:

Try leaving the prefix on until the URL gets to php.

Which php server are you using?

Some other usual gotchas:

• Make sure you have properly set up your upload directory.
• Make sure you have permissions set properly on the upload directory.

Client Side:

// create a dataUrl from the canvas
var dataURL= canvas.toDataURL();

// post the dataUrl to php
$.ajax({
  type: "POST",
  url: "upload.php",
  data: {image: dataURL}
}).done(function( respond ) {
  // you will get back the temp file name
  // or "Unable to save this image."
  console.log(respond);
});

Server File: upload.php

<?php

// make sure the image-data exists and is not empty
// php is particularly sensitive to empty image-data 
if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {    

    // get the dataURL
    $dataURL = $_POST["image"];  

    // the dataURL has a prefix (mimetype+datatype) 
    // that we don't want, so strip that prefix off
    $parts = explode(',', $dataURL);  
    $data = $parts[1];  

    // Decode base64 data, resulting in an image
    $data = base64_decode($data);  

    // create a temporary unique file name
    $file = UPLOAD_DIR . uniqid() . '.png';

    // write the file to the upload directory
    $success = file_put_contents($file, $data);

    // return the temp file name (success)
    // or return an error message just to frustrate the user (kidding!)
    print $success ? $file : 'Unable to save this image.';

}