Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.09.2019, 10:27
Новичок на форуме
Отправить личное сообщение для Andy_z Посмотреть профиль Найти все сообщения от Andy_z
 
Регистрация: 10.09.2019
Сообщений: 2

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

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

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

Как выделить полигон я уже разобрался. Как сохранить изображение целиком тоже нашел. Теперь остается разобраться с сохранением части изображения. Такое вообще возможно?
Ответить с цитированием
  #2 (permalink)  
Старый 10.09.2019, 11:56
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 410

https://jsfiddle.net/8jwq3cs7/
https://codepen.io/enxaneta/pen/EKxMYo
Ответить с цитированием
  #3 (permalink)  
Старый 10.09.2019, 12:50
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 699

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.
Ответить с цитированием
  #4 (permalink)  
Старый 10.09.2019, 15:42
Новичок на форуме
Отправить личное сообщение для Andy_z Посмотреть профиль Найти все сообщения от Andy_z
 
Регистрация: 10.09.2019
Сообщений: 2

Спасибо, буду пробовать
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Node js Нейронные сети сохранение в файл grigandal Node.JS 0 23.10.2018 15:27
Сохранение контента в файл через JS fdcore Общие вопросы Javascript 10 18.12.2014 14:23
сохранение содержимого div в файл Vic2581 Общие вопросы Javascript 10 13.12.2012 13:50
Запрет на сохранение изображения Вoв@ Общие вопросы Javascript 37 07.02.2009 15:01
Сохранение данных в файл Autosof Общие вопросы Javascript 1 28.08.2008 08:23