如何保存已使用css过滤的图像

Question

所以我有div用户可以过滤他的图像 HTML

  <div class='FilterHere'>
       <img src='../users/s.png' class="ImgtoFi">
    <div class="FilterRange"></div>
      <div class="Filters">
          <div class="Grayscale">
             <img src='../users/s.png' class="ImgtoFi">
          </div>
      </div>

Jquery的

$(".Grayscale").click(function() {
                $(".FilterRange").append('<div><input type="range" class="Ranger"></div>')

            $(".Ranger").change(function() {
                var p=$(this).val(); 
                $(".ImgtoFi").css('filter', 'grayscale('+p+'%)');
                $(".ImgtoFi").css('-webkit-filter', 'grayscale('+p+'%)');
            });

所以这一切都很完美。但是在用户应用了一些过滤器后，如何保存新编辑的图像？