1

我正在尝试将画布保存在我的本地机器上，但没有任何效果。请检查下面的代码。

    <!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>

在此示例代码中，我正在消耗一些图像和云，并希望将其另存为图像文件 ???

4

2 回答 2

1

正如萨乔所说，“污染画布会阻止它被保存。这是一项安全功能，可阻止第三方网站的数据被捕获。

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

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

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

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

于 2013-08-14T08:37:57.503 回答
0

尝试通过或将您发送imageData到服务器。像这样的东西：XMLHTTPRequestfetch

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))

也许这个链接也有帮助

于 2013-08-14T10:18:58.430 回答