通過ajax傳遞畫布數據

我有一個應用程序即時將畫布數據保存到服務器。我的要求是每秒導出畫布數據，通過ajax將其保存到服務器，並通過ajax將相同的數據導入另一個瀏覽器中的另一個畫布。我正在使用jquery進行Ajax。我用下面的代碼來傳遞數據通過ajax傳遞畫布數據

function sendCanvasData() { 
    var data = ''; 
    var ctx = document.getElementById('imageView').getContext('2d'); 
    data = ctx.getImageData(0, 0, 250, 250); 
    $.post("canvas.php", { 
     cdata: data 
    }); 
}

但它傳遞一個空值到服務器。我怎樣才能做到這一點？

來源

2010-10-12 Riyas Anchal

您可以獲取該圖像的數據URL。

document.getElementById('imageView').toDataURL('image/png')

返回值將是PNG Base64編碼的圖像數據。您可以將這些數據上傳到服務器。此外，您可以將此數據顯示給客戶，無需任何轉換或轉換（<img src="data:..."/>）。

當加載從服務器這個數據，只是進行解碼，並把圖像在畫布上：

var img = new Image(); 
img.onload = function() { 
    canvas.getContext('2d').drawImage(this, 0, 0); 
} 
img.src = base64EncodedData;

來源

2010-10-12 10:49:28

我想表明在其他畫布圖像沒有圖像 – 2010-10-13 05:10:02

你總是可以從base64編碼的數據構建的圖像，並把它在畫布上。 – 2010-10-19 20:06:54

查看答案的更新版本以查看解碼示例。 – 2010-10-19 20:10:18

通過ajax傳遞畫布數據

回答

相關問題