CODEWITHSUNDEEP
phpjavascripthtml
shubhi1910
shubhi1910

Reputation: 117

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?

Upvotes: 2

Views: 4053

Answers (3)

lostsource
lostsource

Reputation: 21830

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/

Upvotes: 0

heart_hacker
heart_hacker

Reputation: 115

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`

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

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.

Upvotes: 3

Related Questions