Ответ 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.