php如何将HTML5 Canvas保存为服务器上的图像

以下是如何实现您的需求的示例：

1）画一些东西（取自画布教程）

<canvas id=\"myCanvas\" width=\"578\" height=\"200\"></canvas>
< >
    var canvas = document.getElementById(\'myCanvas\');
    var context = canvas.getContext(\'2d\');

    // begin custom shape
    context.beginPath();
    context.moveTo(170, 80);
    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
    context.bezierCurveTo(420, 150, 420, 120, 390, 100);
    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
    context.bezierCurveTo(200, 5, 150, 20, 170, 80);

    // complete custom shape
    context.closePath();
    context.lineWidth = 5;
    context.fillStyle = \'#8ED6FF\';
    context.fill();
    context.strokeStyle = \'blue\';
    context.stroke();
</ >

2）将画布图像转换为URL格式（ 64）

var dataURL = canvas.toDataURL();

3）通过Ajax将其发送到您的服务器

$.ajax({
  type: \"POST\",
  url: \" .php\",
  data: { 
     img 64: dataURL
  }
}).done(function(o) {
  console.log(\'saved\'); 
  // If you want the file to be visible in the browser 
  // - please modify the callback in  . All you
  // need is to return the url to the file, you just saved 
  // and than put the image in your browser.
});

3）将 64保存在服务器上作为图像

$img = $_POST[\'data\'];
$img = str_replace(\'data:image/png; 64,\', \'\', $img);
$img = str_replace(\' \', \'+\', $img);
$fileData =  64_decode($img);
//saving
$fileName = \'photo.png\';
file_put_contents($fileName, $fileData);