title: Convert an image to grayscale in HTML/CSS and save the new image
body: <p>Is there anyway that I can convert the image to Gray scale or such other types by adding filters in (html and css) and then Save the new image back into server.</p>
  
  <p>This is what I have and I want to be able to keep the grayscale page stationary and save it as a new photo
  I also have svg file </p>
  
  <p>
   
    
   
  </p>
  
  <pre><code>&lt;title&gt;canvas image manipulation&lt;/title&gt;
  &lt;style&gt;
      img {
  filter: none;
          -webkit-filter: grayscale(0);
  
      }
  
      img:hover {
          filter: url(filters.svg#grayscale); /* Firefox */
          filter: gray; /* IE */
          -webkit-filter: grayscale(1); /* Webkit */
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;img src="profile.jpg"&gt;
  &lt;input type="button" class="img:hover" value="button"&gt;
  </code></pre>