CODEWITHSUNDEEP
javascriptjquerycanvas
jeevank
jeevank

Reputation: 1

How to save multiple canvas content of a division to a png image?

Good afternoon,

I have multiple canvas in a main division in following hirarchy:

<div id="main">
  <canvas id="one">
  <canvas id="two">
  <div id="main_2">

     <canvas id="three">

  </div>

</div>

I am drawing an image inside main division, I want to export all content inside main division and save it as an image, kindly help.

Upvotes: 0

Views: 768

Answers (1)

MJQ
MJQ

Reputation: 1786

You have to get canvas data and send it to php server, There you can save it as image!

Get data and send via ajax,

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

PHP,

<?php 
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];


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

    $unencodedData=base64_decode($filteredData);

    $random_digit=md5(uniqid(mt_rand(), true));

    $fp = fopen( 'yourfolder/new'.$random_digit.'.png', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
}
?>

The image will be saved at "yourfolder/new'.$random_digit.'.png'". Link to same question,

Sending photo from javascript to server

Upvotes: 1

Related Questions