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

Question

Можете ли вы сериализовать / десериализовать объект холста в javascript?

Answer 1

Помимо метода getImageData, вы можете использовать canvas.toDataURL() для получения PNG в кодировке URL-адреса данных. Если вам нужно сериализовать в строку, это избавит вас от необходимости преобразовывать необработанные данные в строку вручную. Вы можете десериализовать, создав изображение и установив 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, но более поздние версии поддерживают.

Answer 2

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

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