@QuayS1de

Как сохранить изображение, обработанное фильтрами CSS, с помощью JS?

Существует ли какой-нибудь способ сохранения?

на просторах интернета видел предложения засунуть это всё в canvas, но так и не получилось нормально это реализовать
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
Фильтры CSS применяются только для показа фильтрованной картинки на экране. Они не позволяют ничего сохранить, зато (и в том числе по этому) умеют работать даже с картинками из другого ориджина.
Для сохранения придется и вправду кинуть картинку на канву, потом сделать фильтры самостоятельно. Обычно бывает так:
ctx.drawImage(img, ...); // рисование картинки на канве
const data = ctx.getImageData(0, 0, canvas.width, canvas.height); // пиксели картинки


после чего делаются преобразования цветов пикселей (это самое простое), либо "сверточные фильтры", когда цвет пикселя определяется в том числе и по соседним пикселям (например, для блюра).
После ctx.putImageData(data) можно сохранить canvas.toBlob
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы