HTML從Cookie加載畫布數據

我進入了一個問題，我試圖從cookie加載我的畫布數據，但是當我加載數據時發生以下錯誤。HTML從Cookie加載畫布數據

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

什麼，我試圖做的就是當另一按鈕被按下我想讀，然後重新繪製在畫布上該數據按下一個按鈕，然後帆布數據保存到一個cookie。

if (document.getElementById('hdnSwitchButton').getAttribute("Value") == 0) { 
      canvas.style.zIndex = "-2"; 
     } else if (document.getElementById('hdnSwitchButton').getAttribute("Value") == 1) { 
      canvas.style.zIndex = "0"; 
      canvasRead = getCookie("canvas"); 
      if (!canvasRead) { 
       alert('Error: Cannot read canvas!'); 
      } else { 
       context.putImageData(canvasRead, 0, 0); 
      } 
     }

這是我initiliase代碼而讀取cookie並上線時出現錯誤：

context.putImageData(canvasRead, 0, 0);

當保存一個cookie，這是我的代碼：

function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for (var i = 0; i < ca.length; i++) { 
     var c = ca[i].trim(); 
     if (c.indexOf(name) == 0) return c.substring(name.length, c.length); 
    } 
    return ""; 
} 

function BrowserButtonClick() { 
    document.getElementById('hdnSwitchButton').setAttribute('Value', 0); 
    canvasSave = context.getImageData(0, 0, aWidth, aHeight); 
    document.cookie = "canvas=" + canvasSave; 
}

和我HTML畫布代碼如下：

     <div class="canvas"> 
         <canvas id = "DrawingCanvas"> 
          <p>Unfortunately, your browser is currently unsupported by our web application. We are sorry for the inconvenience. Please use one of the supported browsers listed below.</p> 
          <p>Supported browsers: <a href="http://www.google.com/intl/en_uk/chrome/browser/">Chrome</a>, <a href="http://www.opera.com">Opera</a>, <a href="http://www.mozilla.com">Firefox</a>, <a href="http://www.apple.com/safari">Safari</a>, and <a href="http://www.konqueror.org">Konqueror</a>.</p> 
         </canvas> 
        </div>

我想知道的是爲什麼發生這種情況，以及如何從cookie中加載我的畫布，沒有任何問題或更好的加載畫布數據的更有效的方式。

來源

2014-05-23 James

您的畫布由其imageData對象定義。

imageData對象包含在畫布被序列化和保存後重繪畫布所需的所有內容。 imageData是一個對象，但imageData的重要部分是它的data屬性，它擁有一個表示畫布上每個像素的數組。

您可以通過在Cookie中保存並恢復此像素數組來重新加載畫布。

但是...

......話說回來，得到的餅乾很可能是大 - 兆大。您可能需要考慮將畫布像素保存爲圖像（使用canvas.toDataURL），從而創建可保存的較小圖像文件。

總之，要回答你的問題......

演示：http://jsfiddle.net/m1erickson/c8Vnf/

保存

使用context.getImageData得到定義你的畫布爲imageData對象。
像素內容存儲在imageData對象（imageData.data）上的RGBA數據數組中。
轉換數組到字符串JSON.stringify
保存這個字符串當作一個cookie。

恢復

要還原你的畫布，讓cookie字符串，然後該字符串轉換回一個數組JSON.parse。
使用context.getImageData得到一個爲imageData對象，表示你的畫布：
填寫爲imageData對象與保存的像素數據的像素數據陣列：
按修改後的圖象 - 對象返回到畫布與context.putImageData：

代碼保存：

var imgData=ctx.getImageData(0,0,canvas.width,canvas.height); 

J=JSON.stringify(imgData.data); 

// and save J as a cookie

代碼恢復：

var savedData=JSON.parse(J); 

var imgData=ctx.getImageData(0,0,canvas.width,canvas.height); 

var data=imgData.data; 

for(var i=0;i<data.length;i++){ 

    data[i]=savedData[i]; 

} 

ctx.putImageData(imgData,0,0);

來源

2014-05-23 18:14:34 markE

HTML從Cookie加載畫布數據

回答

相關問題