Windows iTOps Tube

Wednesday, May 9, 2012

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

Okay, so a friend of mine asked me to assist him in creating a canvas "painting" application for a mobile browser site hes creating (admittedly, Ive 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

(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? Its basically the only option at this point, with such a wonky browser. =/

Any assistance would be great.

Topic Replies: 0


Post a Comment