Можно ли установить фоновое изображение на холсте HTML5 и выполнить некоторые функции рисования, такие как «Отменить», «Стереть», «Очистить», «Сохранить это фоновое изображение»?

Я хочу знать о холсте HTML5. В моем базовом элементе холста я хочу установить фоновое изображение, и на нем я хочу выполнить некоторые функции, такие как краска «Стереть», «Отменить», «Очистить» и сохранить это обработанное изображение (после применения всех эффектов отменить, очистить). Любое предложение или пример ..


javascript canvas jquery html5-canvas
person Nikunj Kabariya    schedule 03.12.2011    source источник
comment
Дубликат Сохранить/восстановить фоновую область HTML5 Canvas и/или Очистить прямоугольник холста, но сохранить фон.   -  person Phrogz    schedule 03.12.2011

Ответы (3)


arrow_upward
4
arrow_downward

Вы можете нарисовать фон на холсте, используя функцию drawImage(). Все дальнейшие манипуляции рисуются поверх изображения.

Когда вы закончите свою работу, вы можете экспортировать состояние холста в изображение.

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

Может быть, метод сохранения и восстановления будет полезен.

Важно, чтобы вы сначала нарисовали свое изображение на холсте, чтобы все остальные эффекты повлияли на изображение.

person Christian Kuetbach    schedule 03.12.2011
comment
После выполнения отмены, очистки, рисования (с помощью карандаша и цвета), когда я сохраняю это изображение, я не получаю это обработанное изображение, я получаю сохраненное изображение по умолчанию на белом фоне, а некоторые нарисованы мной на этом холсте. Но на самом деле предположим, что я установил в холсте 'backgroundImage':'url(./tmp/Koala.jpg)' .. я хочу, чтобы это было как сохраненное изображение со всеми эффектами, которые я сделал (отмена, рисование, очистка).. - person Nikunj Kabariya; 03.12.2011

arrow_upward
1
arrow_downward

Самая простая и лучшая практика производительности — поместить этот фон как div за холстом.

person Enrique Moreno Tent    schedule 03.12.2011
comment
Но как вы можете сказать мне на практике...? - person Nikunj Kabariya; 03.12.2011

arrow_upward
0
arrow_downward

API истории можно использовать для отмены и повтора действий.

Для сохранения изображения можно использовать метод toDataURL объекта Canvas.

person AshleysBrain    schedule 03.12.2011