converting contents of a div into an image

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 button, I want to save the main div as an image in a folder. I tried doing it using Canvas.toDataURL() but then I found that i cant place a div(main div) inside canvas tags. I also tried imagegrabscreen() function of php but it captured the screen before the whole page is loaded, so it was of no use.

Can anybody help me and suggest a way to implement this using php or javascript?



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.

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.setRequestHeader('Content-Type', 'application/your page name');
                ajax.send(canvasData ); 

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

            }`enter code here`
here save.php


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

    // 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`

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

Using HTML5/Canvas/JavaScript to take screenshots


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.