こんにちは、
私は次のhirarchyのメインディビジョンに複数のキャンバスを持っています:
<div id="main">
<canvas id="one">
<canvas id="two">
<div id="main_2">
<canvas id="three">
</div>
</div>
メインディビジョン内に画像を描画しています。メインディビジョン内のすべてのコンテンツをエクスポートして画像として保存したいので、よろしくお願いします。
こんにちは、
私は次のhirarchyのメインディビジョンに複数のキャンバスを持っています:
<div id="main">
<canvas id="one">
<canvas id="two">
<div id="main_2">
<canvas id="three">
</div>
</div>
メインディビジョン内に画像を描画しています。メインディビジョン内のすべてのコンテンツをエクスポートして画像として保存したいので、よろしくお願いします。
キャンバスデータを取得して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'」に保存されます。同じ質問へのリンク、