Log in to remove this sponsored message
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, native 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's 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:
// 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.
