Передача данных холста через ajax

Question

У меня есть приложение для сохранения данных холста мгновенно на сервер. Мое требование состоит в том, чтобы экспортировать данные о холсте каждую секунду, сохранить его на сервере через ajax и импортировать одни и те же данные в другой холст в другом браузере через ajax. Я использую JQuery для ajax. Я использовал следующий код для передачи данных

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

Но он передал значение null серверу. Как я могу это сделать ?

Answer 1

Вы можете получить URL-адрес для данного изображения.

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

Возвращаемое значение будет Base64-кодированные данные изображения в формате PNG. Вы можете загрузить эти данные на сервер. Также вы можете показывать эти данные клиентам без каких-либо преобразований или преобразований (<img src="data:..."/>).

При загрузке этих данных от сервера, просто декодировать и поместить изображение на холсте:

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