сохранить объект canvas как json

Как бы сериализовать объект canvas, как показано ниже?сохранить объект canvas как json

  context.beginPath(); 
      context.rect(188, 50, 200, 100); 
      context.fillStyle = 'yellow'; 
      context.fill(); 
      context.lineWidth = 7; 
      context.strokeStyle = 'black'; 
      context.stroke();

Поскольку он взаимодействует с контекстом холста процедурно (в том, что правильная терминология?) Я не думаю, что это возможно. Но я хотел бы сохранить объекты таким образом, чтобы им было легче манипулировать ими.

Я имею в виду, как я мог создать два элемента, как указано выше, но просто изменить начальные позиции x, y? Все, о чем я могу думать, это eval, но я знаю, что это ужасно замедлит рисование на холсте.

источник

2016-07-21 hao ramirez

Сериализация создает строку. вам не понадобится json-ify эта строка, если вы не планируете использовать ее в json-контексте, например. отправляя его через запрос ajax, и даже тогда вы могли бы просто «JSON.stringify ({data: var_with_serialized_object))' –

Я бы сохранил данные из объекта, сам объект (холст), поэтому позже вы вызываете информация для воспроизведения оригинального холста ... но это всего лишь подход, который я считаю более практичным ... –

Если вы просто хотите переместить свой рисунок без суеты с каждой из исходных координат, просто используйте context.translate, который перемещает холст [0,0] в любую желаемую позицию на холсте.

function draw(offsetX,offsetY){ 
    // translate the [0,0] origin of the canvas to [offsetX,offsetY] 
    context.translate(offsetX,offsetY); 

    // draw the original rectangle (no changes are required to any coordinates 
    context.beginPath(); 
    context.rect(188, 50, 200, 100); 
    context.fillStyle = 'yellow'; 
    context.fill(); 
    context.lineWidth = 7; 
    context.strokeStyle = 'black'; 
    context.stroke(); 

    // always clean up! Reverse the translation 
    context.translate(-offsetX,-offsetY); 
}

Если вы хотите отправить оригинальные команды холста на другое устройство, вы должны выполнить сериализацию команд контекстного рисования. См. Предыдущее Q&A, в котором показано, как сохранить команды рисования холста в строку. Эта строка может быть отправлена в другом месте (f.ex с использованием AJAX или websockets), а затем принимающее устройство может «переигрывать» команды.

источник

2016-07-22 00:51:18 markE

context.getImageData() - это функция, которую вы ищете. Он будет возвращать объект ImageData из данных на холсте (MDN). Это синтаксис выглядит следующим образом:

ImageData ctx.getImageData(sx, sy, sw, sh);

Итак, если вы хотите сохранить и сериализовать данные из холста, можно использовать следующий код:

var data = context.getImageData(0, 0, context.canvas.width, context.canvas.height).data;

Теперь .data свойство на ImageData объекта это Uint8ClampedArray, который в основном представляет собой большой список всех цветов холста. Однако вы выбираете сериализацию, это не важно.

Предположим, что вы получили одно из сериализованных «сообщений» холста и хотите вернуть его на холст. Нет проблем, все, что вам нужно не context.putImageData():

context.putImageData(message.data, 0, 0);

Это будет «вставлять» данные из первого холста на второй.

Удачи!

источник

2016-07-21 23:26:38 MayorMonty

сохранить объект canvas как json

ответ

Смежные вопросы