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

  • 3DSHub
  • Born
  • Born
  • 3DSHub
  • Posts: 2
  • Loc: Texas

Post 3+ Months Ago

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:

Code: [ Select ]
// 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);
  1. // Assume $pixelArray is a 2-dimensional array of colors for the pixels
  2. // Grab the dimensions of the pixel array
  3. $width = count($pixelArray, 0);
  4. $height = count($pixelArray);
  5. // Create the image resource
  6. $img = imagecreatetruecolor($width, $height);
  7. // Set each pixel to its corresponding color stored in $pixelArray
  8. for ($y = 0; $y < $height; ++$y) {
  9.   for ($x = 0; $x < $width; ++$x) {
  10.     imagesetpixel($img, $x, $y, $pixelArray[$y][$x]);
  11.   }
  12. }
  13. // Dump the image to the browser
  14. imagepng($img, 'notes/'.$filename.'.png');
  15. // Clean up after ourselves
  16. 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.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • 3DSHub
  • Born
  • Born
  • 3DSHub
  • Posts: 2
  • Loc: Texas

Post 3+ Months Ago

Anyone?

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 109 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.