无法使用AJAX / PHP将图像画布保存到文件

Question

I found a great image cropper tool to use for my application. http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/

Works perfect, crops just like I want, but I can't figure out how to save the cropped file via PHP/AJAX. While there are many files involved, the 3 to modify are:

index.php (Cropper Tool)
savefile.php
js/component.js  (the main functions)

In the comments of the above linked article, someone altered the JS to send an AJAX call to a PHP file to 'save' the cropped image. I can't get it to work.

Here's the code and my modifications to component.js

crop = function(){
//Find the part of the image that is inside the crop box
var crop_canvas,
    left = $('.overlay').offset().left - $container.offset().left,
    top =  $('.overlay').offset().top - $container.offset().top,
    width = $('.overlay').width(),
    height = $('.overlay').height();

crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;

crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);

//=== set our canvas data 
var canvasData = crop_canvas.toDataURL('image/png');

//=== call ajax to fire php save function
var ajax = new XMLHttpRequest();    
ajax.open('POST','savefile.php',true);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);


//=== displays image in new window to prove its working
window.open(crop_canvas.toDataURL('image/png'));

}

The next part is the savefile.php. I can never tell if this is actually firing or not since nothing is saved.

<?php

$imageData = $_POST['data'];

//==== replace with dynamic names later ===
$imgFile = “test.jpg”;

if (!empty($imageData)) {
  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type
  $filteredData=substr($imageData, strpos($imageData, “,”)+1);

  // Need to decode before saving since the data we received is already base64 encoded
  $unencodedData=base64_decode($filteredData);

  // Save file.
  $fp = fopen( '$imgFile', ‘wb’ );
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
header (‘Location: index.php’);
?>

Insight is greatly appreciated - spent all Friday night trying to debug to no avail!

Answer 1

You may require only few changes, still I am posting both ajax and php codes. Here, I am not looking towards the canvas and dataURL, and I consider canvasData as dataURL.

Here is ajax, first select xmlhttp method as per browser, open ajax query, add request header, and send data.

if (window.XMLHttpRequest) 
          {  xmlhttp = new XMLHttpRequest();
        } else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {             
              functions(xmlhttp.responseText);} }
        xmlhttp.open("POST","test1.php",true);
        xmlhttp.setRequestHeader('Content-Type', 'application/upload');
        xmlhttp.send(canvasData);

In php, the post of data will be coming as "HTTP_RAW_POST_DATA". So the PHP will be as follows.

if(isset($GLOBALS["HTTP_RAW_POST_DATA"]))  //if data send
{
$imgFile = 'test.jpg';   //set file name to write
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];   //copy data from globals to variable
$filteredData=substr($imageData, strpos($imageData, ",")+1); //filter dataurl string
$unencodedData=base64_decode($filteredData);   //decode url
$fp = fopen( $imgFile, 'wb' );    //open file with write permission
fwrite( $fp, $unencodedData);     //write file
fclose( $fp );   //close the filehandling
}

Answer 2

Your $imageData variable gets empty $_POST['data'] (I guess). Try using FormData :

var ajax = new XMLHttpRequest();    
ajax.open('POST','savefile.php',true);
var data = new FormData();
data.append('data', canvasData);
ajax.send(data);

or as You are already using jQuery:

$.post('saveimage.php', {data: canvasData}, function(){
    alert('Image saved!');
});