Javascript:从 Canvas 保存不起作用

Question

我是 javascript 新手，我正在尝试从 Canvas 保存签名。当我单击“提交”按钮时，应该在浏览器中打开一个新窗口并保存 Canvas 的内容，但这不起作用。我已检查isset以确保该按钮正常工作。

代码:

<?php
            if(isset($_POST['submit']))
            {
                ?>
                        <script>
                            var canvas = document.getElementById("canvas");
                            var w=window.open('about:blank','image from canvas');
                            w.document.write("<img src='"+canvas.toDataURL("image/png")+"' alt='from canvas'/>");
                        </script>
        <?php
            }
        ?>

Answer 1

你可以做这样的事情。从 Canvas 中提取base64图像，将其发布到后端，处理结果(在前端)。

// IGNORE (DRAW STUFF)
  // Source: http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  // draw cloud
  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);
  context.closePath();
  context.lineWidth = 5;
  context.fillStyle = '#8ED6FF';
  context.fill();
  context.strokeStyle = '#0000ff';
  context.stroke();
  // STOP IGNORING

<canvas id="canvas" width="600" height="200"></canvas>
<button onclick="sendImageToBackend()">Send it to backend!</button>
<script>
  function getCanvasImage() {
    var canvas = document.getElementById('canvas');
    return (canvas) ? canvas.toDataURL('image/png') : false;
  }

  function sendImageToBackend() {
    var url = 'save.php';
    var dataURL = getCanvasImage();
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onload = function () {
      var responseImg;
      // Handle response from save.php
      if (this.status === 200) {
        responseImg = document.createElement('IMG');
        responseImg.src = this.responseText;
        document.body.appendChild(responseImg);
      } else {
        console.log('Errorz happened!', this.responseText);
      }
    };
    xhr.send('data=' + encodeURIComponent(dataURL));
  }
</script>

保存.php

<?php
if ($_REQUEST['data']) {
  http_response_code(200); // OK
  echo "{$_REQUEST['data']}";
} else {
  http_response_code(400); // Bad request
  echo "Oh, noes! You brokez it!";
}