2013-10-28

如何把canvas绘制图形上传到服务器

直接把 DataURI 字串储存起來，等要用的時候直接输出至的 src 属性或是 CSS 中


  canvas.toDataURL(type, encoderOptions)

type: image/png image/jpeg
encoderOptions 质量 0-1区间默认.92

  //设置上传路径
  define('UPLOAD_PATH', 'images/');

  //接收
  $img = $_POST['data'];

  $img = str_replace('data:image/png;base64,', '', $img);
  $img = str_replace(' ', '+', $img);
  $data = base64_decode($img);
  $file = UPLOAD_PATH . uniqid() . '.png';
  $success = file_put_contents($file, $data); 

  // output string
  $output = ($success) ? '<img src="'. $file .'" alt="Canvas Image" />' : '<p>Unable to save the file.</p>';

显示

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  <title>PHP base64 image decode demo</title>
  </head>
  <body>
    <!-- 成功存檔的話會秀出 img 標籤以及圖檔，失敗的話會出現 Unable to save the file 的訊息 -->
    <?php print $output; ?>
  </body>
</html>

文章来源: 如何把canvas绘制图形上传到服务器