Okay, in a previous question of mine, I found that the browser I'm working with doesn't support toDataURL() for some reason. I've attempted using workarounds like todataur-png-js but to no avail, as it too fails. I came across the possibility that I could have PHP construct an image based off of the pixel data from the canvas and save it as an image. However, I haven't much experience with canvases nor do I know exactly how to do something like this. Any ideas? A nudge in the right direction would suffice as well. =)
-
todataur-png-js seems like a good direction. what did you try? how did it fail?Cal– Cal2012-04-23 17:03:58 +00:00Commented Apr 23, 2012 at 17:03
-
@Cal There's a page (here [dest.at/tdu/draw.html]) for you to test it out, however the browser does not set the background to to an image containing the canvas data. It does nothing in it. =/Viewtiful– Viewtiful2012-04-23 17:08:02 +00:00Commented Apr 23, 2012 at 17:08
-
It does for me, using latest Chrome. What browser are you using? What error does it give?Cal– Cal2012-04-23 17:09:13 +00:00Commented Apr 23, 2012 at 17:09
-
@Cal Can you click the first link in my question? It contains all of that information. It didn't feel right to re-post all of that, as it would seem like I was simply re-posting an old question. o.oViewtiful– Viewtiful2012-04-23 17:18:40 +00:00Commented Apr 23, 2012 at 17:18
Add a comment
|
2 Answers
If you already have an array of pixels, you can accomplish this using the GD library's imagecreatetruecolor() and imagesetpixel() functions:
// 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
header('Content-Type: image/png');
imagepng($img);
// Clean up after ourselves
imagedestroy($img);
If you want to save the image to disk instead of dumping it to the browser, simply omit the call to header() and pass a path to imagepng() as the 2nd parameter:
imagepng($img, '/some/path/to/your/desired/image.png');
3 Comments
Viewtiful
Hm, the line with "imagesetpixe()" is throwing the error "Cannot use string offset as an array".
FtDRbwLXw6
@Viewtiful:
$pixelArray has to be whatever your pixel array is (you mentioned in your question title that you have the pixel array).Viewtiful
I did? Anyway, would I simply send the value of getImageData().data to the server? Again, I've little experience working with canvases. Sorry. =/
It's unclear if you're able to get at the pixel data for your canvas in the Netfront Browser.
From your example page, change the button handler code:
var cv=document.getElementsByTagName('canvas')[0];document.documentElement.style.background='url('+cv.toDataURL()+')';
To this:
var cv=document.getElementsByTagName('canvas')[0];alert(cv.toDataURL());
Does it show any pixel data in the alert() that pops up?
If it does, then it seems like you can't use data URLs in background images on this browser. If it doesn't, then it looks like your canvas does not support getImageData() under the hood.
