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

Question

I am trying to save canvas on my local machine but nothing is working . 我试图将画布保存在本地计算机上，但是没有任何反应。 please check below code . 请检查以下代码。

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

in this example code i am draing some image and cloud and wish to save it as as image file ??? 在此示例代码中，我正在清空一些图像和云，并希望将其另存为图像文件？

Answer 1

As Sacho mentioned, 'tainting a canvas stops it being saved. 正如Sacho所说，“弄脏画布会阻止其保存。 This is a security feature to stop data from third-party websites being captured. 这是一项安全功能，可阻止捕获来自第三方网站的数据。

One workaround is to serve up all static images from your own website. 一种解决方法是提供您自己网站上的所有静态图像。 This can be done by having your server download the image on request from the third-party site and return the data stream (as if it was on your own domain). 这可以通过让您的服务器根据要求从第三方站点下载图像并返回数据流（就像它在您自己的域中一样）来完成。 Then the browser has no complaints about tainting as it is effectively from your server. 这样，浏览器就不会对污点有所抱怨，因为它实际上是从您的服务器获取的。

I have no idea what your server-side technology is, so can't suggest a specific implementation, but you basically could generate requests like: 我不知道您的服务器端技术是什么，因此无法建议特定的实现，但是您基本上可以生成如下请求：

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

Where the source URL is provided as a parameter and imagerequest.php (or aspx) etc is your server script. 源URL作为参数提供，而imagerequest.php（或aspx）等是您的服务器脚本。

Answer 2

Try send your imageData to server via XMLHTTPRequest or fetch . 尝试通过XMLHTTPRequest或fetch将imageData发送到服务器。 Something like this: 像这样：

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

Maybe this link helps too 也许这个链接也有帮助

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

问题描述

2 个解决方案

解决方案1
1 2013-08-14 08:37:57

解决方案2
0 2013-08-14 10:18:58

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

问题描述

2 个解决方案

解决方案1 1 2013-08-14 08:37:57

解决方案2 0 2013-08-14 10:18:58

解决方案1
1 2013-08-14 08:37:57

解决方案2
0 2013-08-14 10:18:58