Jump to content

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


Recommended Posts

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...