0

This question was closed inappropriately. I stated in my question that I know how to download an image edited with CSS. Yet I was referred to 4 pages that explain how to download an image with CSS. That is not the question. The question is how do I edit with CSS AND SVG and download the image with the the SVG intact. Please read further:

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.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
AARRGGHHH
  • 67
  • 1
  • 1
  • 5
  • Yes both questions are the same. That your CSS filters targets an svg doens't change anything, you still have to set `ctx.filter = "url(#svgColor)"` before drawing your image on `cSave`'s context. – Kaiido Jan 19 '21 at 05:33
  • ctx.filter = "url(#svgColor)" was not addressed in the other questions. Thus, this was not a duplicate. Still, I appreciate your assistance and will try your suggestion. Thank you – AARRGGHHH Jan 19 '21 at 05:47
  • Once again that the CSS filter is `blur(10px)`,`blur(50px)`, `invert(1)` or `url(#filter)` doesn't matter, the answerer there will not list all the possible inputs, they are all equivalent because doing the same thing: apply a CSS filter on a 2D context. – Kaiido Jan 19 '21 at 05:51
  • Sorry, that didn't explain how to apply the SVG filter to the preview canvas for editing purposes. ctx.filter = "url(#svgColor)" is in regard to the save canvas. Also, will ctx.filter, which contains several CSS filter values, accept the addition of SVG values? Thank you. – AARRGGHHH Jan 19 '21 at 05:53
  • Why should the preview canvas be any different than the saving one? And what do you mean by "accept the addition of SVG values". It will use the svg as it is when the next drawing method is called. What about you make an [MCVE]? Maybe I miss something in your setup (no need to make the actual svg filter editor, just a fixed filter should do) – Kaiido Jan 19 '21 at 05:56
  • "Why should the preview canvas be any different than the saving one?" The preview canvas is where the editing occurs. When the user is finished editing, the image plus filter settings from the preview canvas are applied to the save canvas. I read about that approach here. Regarding the filters: var cssFilter = getComputedStyle(cP).filter; How do I get "cssFilter" to contain both brightness (1.2) AND svgColor value="2 0 0 0 0 ..."? I can't test it because preview isn't working yet. Hopefully that explains it. And hopefully clears the duplicate issue. Many thanks! – AARRGGHHH Jan 19 '21 at 07:33
  • I still don't see why you don't use a single canvas for both editing and exporting (just show the export export canvas) and yes, you can very well do `ctx.filter = "brightness(1.2) url(#filter)";` – Kaiido Jan 19 '21 at 07:35
  • Copying from canvas preview was suggested here a long time ago, I don't know why it was suggested. But it works. SO: 1. How do I get the SVG filter to show changes in the preview canvas? Right now, it's as though the SVG filter does not exist. 2. Is there a technique needed to add both the CSS filters and SVG filters to var cssFilter? Whether 1 or 2 canvases are used, I have no way to test for this because no SVG edits are occurring (the preview shows no SVG filter effects). Do I need something like: var cssFilter = getComputedStyle(cP).filter + svgCOLOR? Thank you again! – AARRGGHHH Jan 19 '21 at 07:52
  • 1
    Once again we need an [MCVE] of what you are doing to help you. And no, you don't need a second canvas. – Kaiido Jan 19 '21 at 08:03
  • I'll add the minimal reproducible example when I have a little more time. Perhaps I don't need a second canvas, but it works fine this way. In the interim, please answer my follow up questions 1. How do I get the SVG filter to show changes in the preview canvas? Right now, it's as though the SVG filter does not exist. 2. Is there a technique needed to add both the CSS filters and SVG filters to var cssFilter? Do I need something like: var cssFilter = getComputedStyle(cP).filter + svgCOLOR? Thank you – AARRGGHHH Jan 19 '21 at 08:16

0 Answers0