Construct Image Server-Side From Canvas getImageData().data

[3DSHub]

Okay, so a friend of mine asked me to assist him in creating a canvas "painting" application for a mobile browser site he's creating (admittedly, I've little experience working with canvases). Unfortunately, the browser completely lacks .toDataURL() support, and work-arounds such as todataurl-png-js are a no-go as well. However, I thought of a nice fix: by simply sending the image data to the server, I could have PHP construct it based off of the value of getImageData().data that was sent to the server... or so I thought.

PHP throws the error Cannot use string offset as an array when I attempted to build the image with the following:

PHP Code:

// Assume $pixelArray is a 2-dimensional array of colors for the pixels

// Grab the dimensions of the pixel array
$width = count($pixelArray, 0);
$height = count($pixelArray);

// Create the image resource
$img = imagecreatetruecolor($width, $height);

// Set each pixel to its corresponding color stored in $pixelArray
for ($y = 0; $y < $height; ++$y) {
    for ($x = 0; $x < $width; ++$x) {
        imagesetpixel($img, $x, $y, $pixelArray[$y][$x]);


    }

}

// Dump the image to the browser

imagepng($img, 'notes/'.$filename.'.png');

// Clean up after ourselves
imagedestroy($img); 

(The above throws an error when I attempt the to create the image from the canvas data from getImageData().data)


The value of $pixelArray when echoed out is [object Uint8ClampedArray].
Am I not able to access the value of getImageData().data?

Does anyone know how to get something like this working? It's basically the only option at this point, with such a wonky browser. =/

Any assistance would be great.

[weegillis]

for ($y = 0; $y < $height; ++$y) {
for ($x = 0; $x < $width; ++$x) {

Should that be, $y++ and $x++? Could be you just have a syntax error.

Are your height and width getting the correct data? You might have width counting the rows, instead of the columns.

Hi there,
there is a simple script with example for counting rows and columns of a two-dimensional array.

<?php
$data = array(
"apples" =>
array("red", "yellow", "pineapples"),
"bananas" =>
array("small", "medium", "big"),
"vegs" =>
array("potatoes", "carrots", "onions")
);

$rows = count($data,0);
$cols = (count($data,1)/count($data,0))-1;
print "There are {$rows} rows and {$cols} columns in the table!";
?>