Сеансирование/десериализация по холсту Javascript?

Ответ 1

Помимо метода getImageData, вы можете использовать canvas.toDataURL() для получения PNG с кодировкой данных. Если вам нужно сериализовать строку, это избавит вас от необходимости конвертировать необработанные данные в строку вручную. Вы можете выполнить десериализацию, создав изображение и установив src в URL-адрес данных, затем нарисуя его на холсте.

[Отредактировано для учета асинхронной загрузки (предлагается olliej).]

function serialize(canvas) {
    return canvas.toDataURL();
}

function deserialize(data, canvas) {
    var img = new Image();
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext("2d").drawImage(img, 0, 0);
    };

    img.src = data;
}

Если я правильно помню, некоторые более старые версии Safari и, возможно, Opera не поддерживали toDataURL, но более поздние версии делали.

Ответ 2

Вы можете получить прямой доступ к пикселям с canvas.getImageData() и .putImageData(). Вы также можете сериализовать изображения на URL-адрес данных с canvas.toDataURL() для публикации на сервер.

Это работает только в новых браузерах.