Изображение внутри обрезки холста с пользовательским прямоугольником JQuery

Question

У меня есть элемент Canvas внутри изображения (холст имеет тот же размер изображения), я хочу обрезать это изображение, используя прямоугольник выбора! Для своего проекта я использую фреймворк Javascript JQuery и ищу плагин, который реализует произвольный прямоугольник выбора на холсте! Кто-нибудь знает один плагин, который делает это (я основал много плагинов, которые реализуют эту функциональность, но только на элементах)? Если нет, как можно реализовать собственный прямоугольник на элементах Canvas?

Надеюсь в твоих ответах!

Answer 1

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

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

Пожалуйста, смотрите мой пример здесь: http://jsbin.com/apitak/4

Answer 2

Вы пытались использовать Fabric.js для создания прямоугольника на холсте?