Самый эффективный способ хранения раздела холста?

Question

Я делаю приложение, и мне нужно сохранить «моментальные снимки» на холсте, чтобы потом использовать их.

В настоящее время я превращаю холст в dataUrl, создавая с ним «новое изображение()» и сохраняя его в массиве. Но это оказывается довольно медленным, и вроде бы замораживает приложение на долю секунды, когда это происходит.

Есть одна проблема, о которой я знаю; он сохраняет весь холст, в то время как мне нужно только сохранить небольшой его фрагмент.

Итак, есть ли более быстрый способ сохранить текущий холст или есть способ превратить только небольшой раздел в dataUrl без создания новых холстов каждый раз?

Answer 1

Вы можете создать холст размером области, которую вы хотите сохранить:

var save_area = document.createElement("canvas"); 
save_area.width = x1 - x0; 
save_area.height = y1 - y0; 

Вы рисуете оригинальный холст в области сохранения, переведенный (-x0, -y0) так, что часть вы заинтересованы в том, Скопировано в save_area пикселей.

save_area.getContext("2d").drawImage(original_canvas, -x0, -y0); 

Чтобы восстановить только отдернуть save_area в холст после первой очистки пораженного участка (это необходимо, чтобы правильно обрабатывать прозрачность).

original_canvas_context.clearRect(x0, y0, x1-x0, y1-y0); 
original_canvas_context.drawImage(save_area, x0, y0); 

Вы можете увидеть рабочий пример в http://jsfiddle.net/Lhmrswch/2/