converting contents of a div into an image

Question

I am creating an image editor type web application. I have a main div which will contain many div inside it.

When the user clicks on a save bu

Answer 1

use this code to save image from canvas

function save_canvas_img()
            {

                var canvas = document.getElementById("your id");
                var canvasData = canvas.toDataURL("image/png");
                var ajax = new XMLHttpRequest();
                ajax.open("POST",'save.php',false);
                ajax.setRequestHeader('Content-Type', 'application/your page name');
                ajax.send(canvasData ); 

                alert('You have successfully saved this image');

            }`enter code here`
here save.php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{

    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];


    $filteredData=substr($imageData, strpos($imageData, ",")+1);

    $unencodedData=base64_decode($filteredData);
    // Need to decode before saving since the data we received is already base64 encoded

    //echo "unencodedData".$unencodedData;
    $randomName = mktime(). rand(99999,9999999). '.png';



   $fp = fopen( 'foldername/'.$randomName, 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );}`enter code here`

Answer 2

If you want to take a 'screenshot' of your main div check out the links below

Using HTML5/Canvas/JavaScript to take screenshots

http://html2canvas.hertzen.com/

Answer 3

Why are you using a bunch of divs when you could just use one canvas and draw on it with proper canvas functions?

There are plenty of examples of what you're trying to do, such as this one.