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

Question

[Nekio]

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

на просторах интернета видел предложения засунуть это всё в canvas, но так и не получилось нормально это реализовать

Answer 1

[Alexandroppolus]

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

ctx.drawImage(img, ...); // рисование картинки на канве
const data = ctx.getImageData(0, 0, canvas.width, canvas.height); // пиксели картинки

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