由JavaScript Canvas API生成的圖像在保存時不可見？

的完整代碼，也可以在這裏找到：https://gist.github.com/1973726（部分版本上的jsfiddle http://jsfiddle.net/VaEAJ/顯然不能讓PHP與運行的jsfiddle）由JavaScript Canvas API生成的圖像在保存時不可見？

我最初寫了一些代碼，花了canvas元素，並將其保存爲圖像（見工作代碼在這裏：https://gist.github.com/1973283），然後我更新它，以便它可以處理多個畫布元素，但現在的主要區別是圖像數據通過jQuery ajax方法傳遞到我的PHP腳本，而不是通過隱藏的表單字段。

問題是圖像顯示爲空白。它們在生成時大約爲200kb，因此它們顯然有一些內容，但是當您預覽圖像時什麼也沒有顯示，當我嘗試在Adobe Fireworks或其他照片應用程序中打開圖像時，我無法打開文件。

圖像數據似乎是通過服務器罰款，但我真的不知道爲什麼現在當我寫圖像使用base64_decode這將意味着生成的圖像將不再是可見的？我唯一能想到的是，也許通過ajax發佈的數據並不是通過發送所有數據，因此它會生成一個圖像，但它不是完整的內容，因此圖像不完整（因此爲什麼照片應用程序可以'打開它）。

當檢查Firebug中的發佈數據時，它表明已達到限制？不知道這是什麼問題？

來源

2012-03-04 Integralist

能否請您提供使用jQuery AJAX在你的代碼更新的例子嗎？ – 2012-03-04 17:30:38

1）我很驚訝它可以在所有因爲交叉來源問題2）你似乎沒有編碼數據的URI，嘗試'encodeURIComponent（newCanvas.toDataURL（））'在將數據傳遞給jQuery的ajax方法。 – James 2012-03-04 18:30:38

問題實際上是通過XHR發送數據。我最初使用jQuery ajax方法，然後將其交換出我自己的ajax抽象，但問題仍然存在，直到有人在Twitter上建議我使用FormData將數據傳遞到服務器端PHP。示例如下...（完整的代碼可以在這裏看到：https://gist.github.com/1973726）

// Can't use standard library AJAX methods (such as…) 
// data: "imgdata=" + newCanvas.toDataURL() 
// Not sure why it doesn't work as we're only abstracting an API over the top of the native XHR object? 
// To make this work we need to use a proper FormData object (no data on browser support) 
var formData = new FormData(); 
formData.append("imgdata", newCanvas.toDataURL()); 

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "saveimage.php"); 
xhr.send(formData); 

// Watch for when the state of the document gets updated 
xhr.onreadystatechange = function(){ 
    // Wait until the data is fully loaded, and make sure that the request hasn't already timed out 
    if (xhr.readyState == 4) { 
     // Check to see if the request was successful 
     if (checkHTTPSuccess(xhr)) { 
      // Execute the success callback 
      onSuccessfulImageProcessing(card, newCanvas, ctx, getHTTPData(xhr)); 
     } 
     else { 
      throw new Error("checkHTTPSuccess failed = " + e); 
     } 

     xhr.onreadystatechange = null; 
     xhr = null; 
    } 
};

```

來源

2012-03-05 22:33:59 Integralist

如果您沒有Cross Origin SECURITY_ERR（您的小提琴受到影響，但只要您的圖像在同一臺服務器上，它們就會沒事），並且您正在收集一些數據，因此您可能遇到了問題PHP。在PHP user notes中，您必須用空格替換空格才能解碼使用Javascript編碼的base64。

$data = str_replace(" ", "+", $_POST['imgdata']); 
file_put_contents("generated.png", base64_decode($data));

來源

2012-03-04 18:32:50

由JavaScript Canvas API生成的圖像在保存時不可見？

回答

相關問題