Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Сохранение изображения ограниченное полигоном в файл (https://javascript.ru/forum/css-html/78408-sokhranenie-izobrazheniya-ogranichennoe-poligonom-v-fajjl.html)

Andy_z 10.09.2019 10:27

Сохранение изображения ограниченное полигоном в файл
 
Доброго времени суток.

Имеется следующая задача:

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

Как выделить полигон я уже разобрался. Как сохранить изображение целиком тоже нашел. Теперь остается разобраться с сохранением части изображения. Такое вообще возможно?

SuperZen 10.09.2019 11:56

https://jsfiddle.net/8jwq3cs7/
https://codepen.io/enxaneta/pen/EKxMYo

Alexandroppolus 10.09.2019 12:50

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, либо этот же блоб кинуть на сервер.

Andy_z 10.09.2019 15:42

Спасибо, буду пробовать


Часовой пояс GMT +3, время: 15:10.