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

how to save html5 canvas to server

本文关键字：保存 服务器 布保存 html5      更新时间：2023-09-26

我正在将一些图像加载到我的画布中，然后在它们加载后，我想单击一个按钮，将画布图像保存到我的服务器中。我可以看到脚本运行良好，直到它到达"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);
}
?>

不过我遇到了一个安全错误。

在画布元素的规范中，它声明：

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

为了缓解这种情况，与画布元素一起使用的位图被定义为具有指示它们是否为原点清洁的标志。所有位图从它们的原点clean设置为true开始。标志设置为false当使用跨原点图像或字体时。

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

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

由于您正在将来自不同服务器的图像加载到画布元素中，因此能够使用toDataURL（）的解决方法是将画布"复制"到新的画布元素中以将原始clean标志重置为"true"。

你可以在这里看到一个例子

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

相关文章：