Question

我正在尝试在我的本地计算机上保存画布但没有任何工作。请查看以下代码。

    <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }

    </style>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  </head>

  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <img id="canvasImg" alt="Right click to save me!">
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');


       var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);

       // 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();
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

      var imageData = canvas.toDataURL();


    </script>
  </body>
</html>

在这个示例代码中，我正在绘制一些图像和云，并希望将其保存为图像文件???

Answer 1

正如Sacho所说，'污染画布会阻止它被保存。 This is a security feature阻止第三方网站捕获数据。

一种解决方法是从您自己的网站提供所有静态图像。这可以通过让您的服务器根据请求从第三方站点下载映像并返回数据流（就像它在您自己的域中一样）来完成。然后浏览器没有关于污染的抱怨，因为它实际上来自你的服务器。

我不知道你的服务器端技术是什么，所以无法建议具体的实现，但你基本上可以生成如下的请求：

/imagerequest.php?url=http%3A%2F%2Fwww.html5canvastutorials.com%2Fdemos%2Fassets%2Fdarth-vader.jpg

源URL作为参数提供，imagerequest.php（或aspx）等是您的服务器脚本。

Answer 2

尝试通过imageData或XMLHTTPRequest将fetch发送到服务器。像这样：

const canvas = document.getElementById('cvs');
const context = canvas.getContext('2d');
context.font = '26pt Arial';
context.fillText('Some example text!', 10, 40);

url = canvas.toDataURL();
fetch('/yoururl', { method: 'POST', body: new FormData(url)})
.then(res => console.log(res))

也许this link也有帮助

将画布保存为本地计算机上的图像

2 个答案: