如何將html5 canvas保存到服務器

Question

我將一些圖像加載到畫布上，然后在加載之后，我想單擊一個按鈕，將畫布圖像保存到我的服務器上。 我可以看到腳本運行良好，直到到達“ 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);
}
?>

我雖然遇到安全錯誤。

Answer 1

在canvas元素的規范中，它指出：

如果來自一個來源的腳本可以訪問來自另一個來源（不相同）的圖像中的信息（例如，讀取像素），則可能發生信息泄漏。

為了減輕這種情況，畫布元素使用的位圖被定義為具有指示其是否為原始位置的標志。 所有位圖均以其origin-clean設置為true開頭。 使用跨域圖像或字體時，該標志設置為false。

toDataURL（），toDataURLHD（），toBlob（），getImageDataHD（）和getImageDataHD（）方法將檢查該標志，並將拋出SecurityError異常，而不是泄漏跨域數據。

在某些情況下可以重置該標志； 例如，當CanvasRenderingContext2D綁定到新畫布時，將清除位圖並將其標志重置。

由於要將圖像從其他服務器加載到canvas元素中，因此能夠使用toDataURL（）的變通辦法是將畫布“復制”到新的canvas元素中，以將origin-clean標志重置為“ true”。

你可以在這里看到一個例子

Answer 2

我發現我做錯了什么，但不確定為什么現在可以工作。 在我使用的實際代碼中，我使用的是完整網址https://www.mywebsite.com/images/image.png，而不是images / image.png出於某種原因，我只寫了縮短的images / image.png 。 工作正常。 感謝您提供的所有調試幫助和替代解決方案。

如何將html5 canvas保存到服務器

問題描述

2 個解決方案

解決方案1
1 已采納 2013-11-22 02:08:31

解決方案2
0 2013-11-22 03:30:23

如何將html5 canvas保存到服務器

問題描述

2 個解決方案

解決方案1 1 已采納 2013-11-22 02:08:31

解決方案2 0 2013-11-22 03:30:23

解決方案1
1 已采納 2013-11-22 02:08:31

解決方案2
0 2013-11-22 03:30:23