如何在已使用CSS过滤的计算机中保存图像

Question

我有一个用HTML可以过滤图像的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+'%)');
            });

因此，在用户编辑他的图像后，如何保存新的过滤图像？