[TRANSAMS4EVER]

I am trying to get a script I found give a .png file a unique name, but for the life of me I cannot figure this out.

I can only get the <canvas> information to post. it is "var acc" is a random number generated from the last page and that number I can't get to post can someone please help me!

function saveViaAJAX()
{
	var testCanvas = document.getElementById("testCanvas");
	var canvasData = testCanvas.toDataURL("image/png");
	var postData = "canvasData="+canvasData;
	var debugConsole= document.getElementById("debugConsole");
	var acc = document.getElementById("acc").value;
	debugConsole.value=canvasData;

	var ajax = new XMLHttpRequest();
	ajax.open("POST",'testSave.php',true);
	ajax.setRequestHeader('Content-Type', 'canvas/upload');
	


	ajax.onreadystatechange=function()
  	{
		if (ajax.readyState == 4)
		{
   // Write out the filename.
    			document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
		}
  	}

	ajax.send(postData);
}
  

here is testSave.php

<?php

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
	{
	    // Get the data
	    $acc2=$_POST['acc'];
	    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
	 
	    // 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);
	 
	    $fp = fopen( "IMG/$acc2.canvas.png", 'wb' );
	    fwrite( $fp, $unencodedData);
	    fclose( $fp );
	}
	?>

[macosxnerd101]

Moved to Javascript. Please note that Java != Javascript.

[JackOfAllTrades]

postData += "&acc=" + acc;

[TRANSAMS4EVER]

JackOfAllTrades, on 18 October 2011 - 02:13 PM, said:

postData += "&acc=" + acc;

so is it ajax.send(postData); that I change to ajax.send postData += "&acc=" + acc; ?

[JackOfAllTrades]

You need to add the value of acc to what you're sending, postData. I've showed you how to do it. Put a little thought into it!

Oh, and the PHP code you're using is ANCIENT.

Don't be a copy/paste coder. Try actually LEARNING what it is you're working with.

[TRANSAMS4EVER]

so i changed the ajax.send to ajax.send(postData += "&acc=" + acc); It creates the image but the file name is .canvas.png am I doing something wrong?

Also what is ancient about this php?

Sorry I haven't been programming long but I want to get alot better at it.

[satis]

you want to do your postData += '&acc=' + acc somewhere before you do the send.

Do you know what ajax.send () actually does? It basically sends the data within the () to the server. Prior to Jack's advice, you weren't sending acc, thus why it never showed up on the server side.

Here's the code with some comments

function saveViaAJAX()
{
	//grab html references
	var testCanvas = document.getElementById("testCanvas");
	var debugConsole= document.getElementById("debugConsole");

	//create data variables
	var canvasData = testCanvas.toDataURL("image/png");
	var acc = document.getElementById("acc").value;

	//create your post variables
	var postData = "canvasData=" + canvasData + '&acc=' + acc;
	
	//whatever
	debugConsole.value = canvasData;

	//create your XMLHttpRequest object
	var ajax = new XMLHttpRequest();
		//set your type and destination
		ajax.open("POST",'testSave.php',true);
		//set your http header content-type
		ajax.setRequestHeader('Content-Type', 'canvas/upload');

	//set your callback function
	ajax.onreadystatechange = function()
  	{
		if (ajax.readyState == 4)
		{
			   // Write out the filename.
    			document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
		}
  	}

	//actually send the ajax request
	ajax.send(postData);
}

Regarding your PHP, I noticed this on php.net

Quote

always_populate_raw_post_data boolean

Always populate the $HTTP_RAW_POST_DATA containing the raw POST data. Otherwise, the variable is populated only with unrecognized MIME type of the data. However, the preferred method for accessing the raw POST data is php://input. $HTTP_RAW_POST_DATA is not available with enctype="multipart/form-data".

http://www.php.net/m...e-raw-post-data

Which then links to http://www.php.net/m...rappers.php.php

php://input

php://input is a read-only stream that allows you to read raw data from the request body. In the case of POST requests, it is preferable to $HTTP_RAW_POST_DATA as it does not depend on special php.ini directives. Moreover, for those cases where $HTTP_RAW_POST_DATA is not populated by default, it is a potentially less memory intensive alternative to activating always_populate_raw_post_data. php://input is not available with enctype="multipart/form-data". 

[TRANSAMS4EVER]

I didn't know what ajax.send () did, I just got into java.

your code satis does work however now I have a different problem now when it saves the .png file it saves two different files .cavas.png and 1785658.canas.png. 1785658.canas.png is a blank image and .cavas.png has the image.

[satis]

this is javascript, not java. The two are entirely different and unrelated programming languages. The best way to piss off a Java programmer is to call it javascript.

Regarding your issue, I only see one fopen statement in the PHP side, so how are two files being written? I'd recommend using Firebug in Firefox to diagnose your AJAX requests and figure out why they're firing twice... at least, I imagine that's what's happening.