javascript - 如何将html5 Canvas 保存到服务器-6ren

javascript - 如何将html5 Canvas 保存到服务器

转载作者：行者123 更新时间：2023-11-28 01:50:55

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

不过我遇到了安全错误。

最佳答案

在the specification for the canvas element它指出:

Information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn't the same).

To mitigate this, bitmaps used with canvas elements are defined to have a flag indicating whether they are origin-clean. All bitmaps start with their origin-clean set to true. The flag is set to false when cross-origin images or fonts are used.

The toDataURL(), toDataURLHD(), toBlob(), getImageData(), and getImageDataHD() methods check the flag and will throw a SecurityError exception rather than leak cross-origin data.

The flag can be reset in certain situations; for example, when a CanvasRenderingContext2D is bound to a new canvas, the bitmap is cleared and its flag reset.

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

你可以看到这个 here 的例子

关于javascript - 如何将html5 Canvas 保存到服务器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20135664/