Показать сообщение отдельно
  #3 (permalink)  
Старый 10.09.2019, 12:50
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,005

Andy_z,
Картинка всегда сохраняется в виде прямоугольника. Если полигон будет, например, треугольный, то что должно быть за его пределами? Прозрачная область?

Если так, то примерный алгоритм:
1) Для полигона определить top (y-координату самого верхнего угла), left (х-координату самого левого угла), width (разницу между самым левым и самым правым углом) и height (аналогично)
2) Координаты полигона сдвинуть на -left и -top, чтобы он примыкал к осям и находился в положительной четверти плоскости.
3) Создать канву с размерами width и height
4) На ней сделать path по уже сдвинутому полигону (он как раз впишется в канву по размерам)
5) Вызвать clip - теперь рисование возможно только внутри полигона
6) Кинуть картинку на канву: ctx.drawImage(image, left, top, width, height, 0, 0, width, height);

Всё, картинка отрисовалась внутри полигона, снаружи прозрачный фон, можно сохранять через canvas.toBlob и ссылку с атрибутом download, либо этот же блоб кинуть на сервер.

Последний раз редактировалось Alexandroppolus, 10.09.2019 в 12:53.
Ответить с цитированием