Applying (not just displaying) Changes To An Image Made By A Combination of CSS and SVG Filters

[AARRGGHHH]

CSS and SVG filters can be used to change the appearance of an image on a canvas. However (with CSS at least, I assume it is the same with SVG) the image is not actually changed, just the display of the image is altered. To change the image, you have to copy it to a new canvas and apply the old canvas as a filter:

        var cP = document.getElementById("cPreview");
        var cntxCP = cP.getContext("2d");
        
        var cS = document.getElementById("cSave");
        var cntxCS = cS.getContext("2d");
        
        // take whatever CSS filter(s) is/are applied to the first canvas
        var cssFilter = getComputedStyle(cP).filter; 

        // use that filter as the second canvas' context's filter
        cS.width = cP.width; 
        cS.height = cP.height; 
        cntxCS.filter = cssFilter;
                
        // This changes the image, instead of just changing the display of the image. EXCEPT iOS...  "Compliance" is still just a fantasy at Apple...  

My question is, once a combination of CSS and SVG filters have changed the appearance of an image, what steps have to be taken to apply those changes to the actual image (as was done above with CSS alone).

Please provide sample code, as I'm completely new to SVG Filters.

Thank you!