Захват/сохранение/экспорт изображения с использованием эффектов фильтра CSS

Я собираюсь создать простой редактор изображений, который использует эффекты фильтра CSS3 (насыщенность, сепия, контраст и т.д.).

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

Я изначально надеялся, что это возможно с @niklasvh html2canvas. К сожалению, он не захватывает большинство свойств CSS3, не говоря уже о фильтрах.

Если у кого-то есть решение или, к сожалению, окончательное знание о том, что это просто невозможно, было бы очень полезно! Спасибо!

Ответ 1

Вы не знаете, что я могу применить CSS к графике в элементе canvas HTML5 (поскольку они не являются частью DOM).

Однако, это ОК! Мы все еще можем делать базовые эффекты фильтра относительно легко и сохранять их как изображение с помощью всего лишь нескольких строк JavaScript.

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

Изменение изображения холста:

var canvas = document.getElementById('canvasElementId'),
    context = canvas.getContext('2d');

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

for (var i = 0; i < imageData.data.length; i+=4) {
    ...
}

Чтобы получить доступ к некоторому API-интерфейсу, вам необходимо активировать контекст 2d на холсте, используя приведенный выше JavaScript. MDN имеет отличную документацию по API, которая доступна вам с помощью контекстного объекта, но важной частью здесь является вызов getImageData(), В принципе, он будет захватывать все значения пикселей в области, которую вы определили (в приведенном выше примере мы захватываем все изображение). Затем, используя эти данные, мы можем перебирать все пиксели и изменять их по мере необходимости. В статье sepia, это явно делает некоторые интересные корректировки, но вы также можете делать оттенки серого, размытие или любые другие изменения по мере необходимости, и там потрясающий библиотека фильтров canvas на Github для этого.

Как сохранить изображение холста:

var canvas = document.getElementById('canvasElementId'),
    image = document.createElement("img");

image.src = canvas.toDataURL('image/jpeg');

document.body.appendChild(image);

Вышеупомянутый script будет выбирать ваш холст (если вы уже сделали ваши рисунки) и создать элемент изображения. Он использует toDataURL() для генерации URL-адреса, который вы можете использовать для установки источника в элементе изображения. В приведенном выше примере элемент изображения добавляется к телу документа. Вы можете просмотреть дополнительную информацию о странице холста MDN.

Ответ 2

Я получил ваш ответ. Я сделал эту программу, наконец, она работает.

этот шаг:
1. Загрузите изображение (JPG/PNG)
2. конвертировать в холст
3. обычай с фильтрами css.
4. Сделайте с помощью camanJS сохранение в качестве изображения.
5. Сделано.

вы также можете использовать значение эффекта reset, изменив значение фильтра по умолчанию.

Удачи!