如何将分区的多个画布内容保存到png图像?

时间:2013-02-25 10:12:27

标签: javascript jquery canvas

下午好,

我在主要部门中有多个画布跟随hirarchy:

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

     <canvas id="three">

  </div>

</div>

我在主要部门内部绘制图像,我想导出主要部门内的所有内容并将其保存为图像,请帮助。

1 个答案:

答案 0 :(得分:1)

你必须获取画布数据并将其发送到php服务器,在那里你可以将它保存为图像!

获取数据并通过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 );
}
?>

图像将保存在“yourfolder / new”。$ random_digit。'。png'“。链接到同一个问题,

Sending photo from javascript to server