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`