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

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

本文关键字：布内容 保存 图像 png 分区 一个      更新时间：2023-09-26

下午好，

我有多个画布在以下层次的一个主要部门：

<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_digt.'.png'"。链接到相同的问题，

将照片从javascript发送到服务器

相关文章：