Using CSS *AND* SVG Filters to Edit and then Save an Image

JavaScript
1

I have a page that allows a user to open an image and edit it with CSS Filters or a custom made filter. The canvas and filter settings are copied to a new canvas so that the image is actually changed by the filters (versus just changing the appearance of the image in the browser). The user can then download the new image as a JPG or PNG.

I’m trying to add SVG filters to the page and running into dead ends. For example, the feColorMatrix filter does not effect the first canvas (where the CSS filters or custom filters are used to edit the image). When the canvas and filter settings are copied to a second canvas for downloading, the SVG effect suddenly appears, but only in the browser (no actual changes are made if you download the image).

Everything (open image, display in preview canvas for editing with CSS or my custom filters, copying image and filter settings to new canvas, and saving new image) works perfectly. The SVG does not work. This is the SVG code that I have so far:

<style>

	#cPreview {  filter: url("#svgCOLOR");  }
	#cSave {  filter: url("#svgCOLOR");  }
	
</style> 

    <!-- SVG Declaration -->

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" width="2" height="1">
      <defs>
        <filter id="svgCOLOR"> 
          <!-- Matrix values will eventually be adjustable using a range slider control -->
          <feColorMatrix type="matrix" values="2 0 0 0 0  0 1 0 0 0  0 0 2 0 0  0 0 0 0 1" />
        </filter>
      </defs>
    </svg>	

    <!-- CANVAS cPreview --> 							

    <canvas id="cPreview" width="2" height="1" style="position:relative; max-width:100%;"></canvas> 

    <!-- CANVAS cSave --> 

    <canvas id="cSave" width="2" height="1" onclick="clickPreview()" style="position:relative; max-width:100%;"></canvas>

I would appreciate assistance.

Thank you!

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.