更改过滤效果取决于所选菜单

Question

我有menu prev和next按钮就像这样：

使用html代码：

<div id="filter" class="filter-container">
  <span id="prev" class="filter-button">&#10096;</span>
  <div class="filter-menu"><option value="C1">C1</option></div>
  <div class="filter-menu"><option value="F2">F2</option></div>
  <div class="filter-menu"><option value="G3">G3</option></div>
  <div class="filter-menu"><option value="P5">P5</option></div>
  <div class="filter-menu"><option value="HB1">HB1</option></div>
  <div class="filter-menu"><option value="HB2">HB2</option></div>
  <span id="next" class="filter-button">&#10097;</span>
</div>

然后我有photo-container这样：

问题1：我使用CSSCO - VSCO FILTER作为效果，但如何在filter-menu上实施此过滤器？

问题2：我尝试使用其中一个类来检查过滤器是否正常工作，但是当我使用html2canvas进行捕获时，过滤器没有被捕获。

我在想怎么办：
 1.使用jquery .addClass();，我从未尝试过这个。我不知道该怎么做  2.使用::after过滤器，它不起作用。
 3.使用<div>堆栈创建新的position: absolute;元素，<img>，阻止.draggable(); <img> 。
 4.使用css进行手动过滤， html2canvas无法捕获过滤器。

任何人都知道如何解决这个问题？感谢