Passing from Javascript canvas image info AND some vars to PHP - php

Question

First of all, sorry for my bad English, I'm Italian. I'm a bit new to programming, but for my office I need to create script that's a bit complex (at least for me). Before explaining the problem i'll explain what i'm doing.
I scripted a canvas that creates an image from data input, then i send the image data to php for the saving process. The problem is that i need to send also an value of 1 of the js vars (in the example value1). I can't figure out how to pass this information together with the raw image data.
The js code for the img drawing and saving. i need to pass the value1 to the save.php
button.addEventListener("click",function(){
//saving the values of the form
var value1 = document.getElementById("value1").value;
//text on the canvas
var value1X = (maxWidth-ctx.measureText(value1).width)/2+500;
//drawing the inputed text on the canvas
ctx.drawImage(img,0,0);
ctx.fillText(value1,value1X,maxHeight);
//getting the image url and sending it to save.php for the saving process
var imageURL = c.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST", 'saving.php', false);
ajax.setRequestHeader('Content-Type','application/upload');
ajax.send(imageURL);
}, false);
Here is the PHP file:
<?php
if (isset($GLOBALS[HTTP_RAW_POST_DATA])) {
$imageData = $GLOBALS[HTTP_RAW_POST_DATA];
$imageData = str_replace('data:image/png;base64,', '', $imageData);
$imageData = str_replace(' ', '+', $imageData);
$data = base64_decode($imageData);
//here i need the value1 value from the javascript
$dirname = "value1";
$filename = "header_top.png";
$newdir = mkdir($dirname);
$path = ("the/path/to".$dirname."/");
$fp = fopen($path.$filename, 'wb');
fwrite($fp, $data);
fclose($fp);
}
I hope I was able to explain myself so you can help me.
Thank you very much.
EDIT:
I think i get it, i mean for the moment it works but i don't know if it the right way doing it.
The fact is that i'm calling a php file so i simple added at the end of the url "?dir="+value1 and it works.
ajax.open("POST", 'saving.php?dir='+value1, false);
ajax.setRequestHeader('Content-Type','application/upload');
ajax.send(imageURL);
and in the php file i simply call $_GET['dir'] to get the value.
#hendrik thank you very much for your answer, unfortunaly i can't get it work with json, maybe becouse i didn't know it.
Anyway if someone knows a better way would be nice.

Answer 1

I think using JSON would be a good way to send the data to your PHP file. That way you can store multiple variables in an Object or Array.
// Store your data in an Object
var imageData = {
url: 'http://adsadsf.com',
name: 'foobar.gif',
width: 500,
height: 400,
directory: 'img/'
}
var ajax = new XMLHttpRequest();
ajax.open("POST", 'saving.php', false);
// Send the imageData object as JSON
ajax.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
ajax.send(JSON.stringify(imageData));
Unfortunately I don't know enough about PHP to explain exactly how to handle the received JSON data, but I guess you can use the json_decode method for that.
More about JSON: http://www.json.org/js.html