如何将html5画布保存到服务器答案

【问题标题】：how to save html5 canvas to server如何将html5画布保存到服务器
【发布时间】：2013-12-06 18:58:14
【问题描述】：

我正在将一些图像加载到我的画布上，然后在它们加载后我想单击一个按钮，将该画布图像保存到我的服务器。我可以看到脚本运行良好，直到它到达“toDataURL”部分并且我的函数停止执行。我究竟做错了什么？这是我的代码：

<!DOCTYPE HTML>
<html>
  <head>
  <style>
    body {
    margin: 0px;
    padding: 0px;
   }
  </style>
</head>
<body>
<canvas id="myCanvas" width="578" 

height="200"></canvas>

<div>
<button onClick="saveCards();">Save</button>
</div>

<script>
  function loadImages(sources, callback) 

{
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) 

{
          callback(images);

        }
      };
      images[src].src = sources[src];

    }

  }

  var canvas = 

document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var sources = {
    great: 

'images/great.jpg',
    star: 

'images/1Star.jpg',  good: 

'images/good.jpg'
  };

  loadImages(sources, function(images) {
    context.drawImage(images.great, 

0, 0, 80, 120);
    context.drawImage(images.star, 80, 

0, 80, 120);
context.drawImage(images.good, 160, 0, 80, 

120);
  });

</script>

<script type="text/javascript">
function saveCards()
{
var canvas= 
document.getElementById("myCanvas");
alert("stops");
var theString= canvas.toDataURL();

var postData= "CanvasData="+theString;
var ajax= new XMLHttpRequest();
ajax.open("POST", 'saveCards.php', true);
ajax.setRequestHeader('Content-Type', 

'canvas/upload');

ajax.onreadystatechange=function()
{

if(ajax.readyState == 4)
{
alert("image was saved");
}else{
alert("image was not saved");
}
}

ajax.send(postData);
}
</script>

</body>
</html>

感谢您的帮助，是因为在调用 toDataUrl 之前没有加载图像吗？如果是这样，你能帮我解决它。

这是 php 脚本：

 <?php
if(isset($GLOBALS['HTTP_RAW_POST_DATA']));
{

$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
$removeHeaders= 

substr($rawImage,strpos($rawImage, ",")+1);
$decode=base64_decode($removeHeaders);
$fopen= fopen('images/image.png', 'wb');
fwrite($fopen, $decode);
fclose($fopen);
}
?>

我遇到了一个安全错误。

【问题讨论】：

你是在本地主机还是其他服务器上运行它？只是问问。

标签： javascript html image canvas save

【解决方案1】：

在the specification for the canvas element 中声明：

如果来自一个来源的脚本可以访问，则可能发生信息泄漏从另一个来源（一个那不一样）。

为了缓解这种情况，与画布元素一起使用的位图被定义为有一个标志表明它们是否是原始清洁的。所有位图从他们的 origin-clean 设置为 true 开始。该标志设置为假使用跨域图片或字体时。

toDataURL()、toDataURLHD()、toBlob()、getImageData() 和 getImageDataHD() 方法检查标志并抛出 SecurityError 异常而不是泄漏跨域数据。

标志在某些情况下可以重置；例如，当一个 CanvasRenderingContext2D 绑定到一个新的画布，位图是清除并重置其标志。

由于您将图像从不同的服务器加载到画布元素中，因此能够使用 toDataURL() 的解决方法是将画布“复制”到新的画布元素中，以将 origin-clean 标志重置为“真的”。

你可以看到这个here的例子

【讨论】：

好的，但即使我这样做它仍然无法正常工作...... png 无论如何都是默认的，对吗？你还能想到别的吗？
@james “不工作”是什么意思？你有什么错误？
好吧，我认为它不会越过 toDataUrl 行，因为当我在任何地方发出警报时，它不会出现。我不认为脚本正在进入 php 页面。我有一个 saveCards.php 脚本，可以将它保存到我服务器上的一个文件夹中，但图像没有显示出来。
它们是否位于同一台服务器上？
我不确定是否有任何错误。我将如何检查错误？谢谢

【解决方案2】：

我知道我做错了什么，但不确定为什么它现在有效。在我使用而不是 images/image.png 的实际代码中，我使用的是完整的 url https://www.mywebsite.com/images/image.png 出于某种原因，当我只编写缩短的 images/image.png 时。它工作正常。感谢您提供的所有帮助调试和替代解决方案。

【讨论】：

所以所有图片都来自我自己的网站，所以如果有人知道为什么使用完整的 url 会出现安全错误，请解释一下。