0

Previous version of 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. Whomever cancelled my question didn't read 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 with CSS. As explained above, the CSS + 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!

AARRGGHHH
  • 67
  • 1
  • 1
  • 5
  • As far as I can see the answers on the duplicates explain your issue. Please show why they don't work for you. – Robert Longson Jan 19 '21 at 08:03
  • There is still no SVG Filter being applied to the preview canvas! THIS IS NOT A DUPLICATE. PLEASE take a look at my code and let me know why I do not see any SVG effects on the preview canvas. Thank you – AARRGGHHH Jan 19 '21 at 08:18
  • Your code does not use the canvas filter property on the context as the answer we keep pointing you to explains you need to. Show us code that uses the canvas filter property that doesn't work and I imagine you'll stop getting duplicated to that answer. – Robert Longson Jan 19 '21 at 08:22
  • "Your code does not use the canvas url property as the answer we keep pointing you to explains you need to." Could you please explain or provide sample code? I do not see where the answer is. You KNOW where it is. I do not. – AARRGGHHH Jan 19 '21 at 08:24
  • https://stackoverflow.com/a/30414124/1038015 – Robert Longson Jan 19 '21 at 08:25
  • That did not answer my question. If there is a line or lines of code there that show how to apply CSS AND SVG filters to a canvas, please paste them here. – AARRGGHHH Jan 19 '21 at 08:31
  • Then show us why not. Edit your question to include code that uses the canvas filter property, ideally as a stack snippet as the answer has done. We need an [mcve] here. – Robert Longson Jan 19 '21 at 09:33

0 Answers0