如何將一個部門的多個畫布內容保存到一個PNG圖像？

Question

下午好，

我有一個主分多帆布在以下hirarchy：

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

    <canvas id="three"> 

    </div> 

</div> 

我畫的主要部門內部的圖像，我想主要的出口部門內的所有內容，並保存爲一個圖像，請幫助。

Answer 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 /新」。$ random_digit。 '巴'」。鏈接到同一個問題，

Sending photo from javascript to server