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 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?

imagegrabscreen grabs a screenshot of the server, so i'm guessing you're working on the server itself using http://localhost right ? — lostsource, Nov 10 '12 at 15:29

score 3 · Answer 1 · answered Nov 06 '12 at 14:12

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.

answered Nov 06 '12 at 14:12

Niet the Dark Absol

320,036
81
464
592

I dont want to make a paint like thing. I am using a bunch of divs that contain several images and text which the user can edit and then save it as an image. – shubhi1910 Nov 06 '12 at 14:15
Well, you could take those `div`s and draw them on a canvas. – Niet the Dark Absol Nov 06 '12 at 14:43

score 0 · Answer 2 · answered Nov 06 '12 at 14:23

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`

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

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/

edited May 23 '17 at 11:43

Community

1
1

answered Nov 10 '12 at 15:33

lostsource

21,070
8
66
88

converting contents of a div into an image

3 Answers3

Linked

Related