结合 CSS 和 SVG 过滤器来编辑和保存图像

如何解决结合 CSS 和 SVG 过滤器来编辑和保存图像

此问题的先前版本被不当关闭。我在问题中表示我知道如何下载使用 CSS 编辑的图像。然而，有人提到了 4 页，解释了如何使用 CSS 下载图像。取消我问题的人没有阅读问题。问题是如何使用 CSS AND SVG 进行编辑并下载 SVG 完好无损的图像。 请进一步阅读：

我有一个页面，允许用户打开图像并使用 CSS 过滤器或自定义过滤器对其进行编辑。画布和过滤器设置被复制到一个新的画布，这样图像实际上被过滤器改变了（而不是仅仅改变浏览器中图像的外观）。然后，用户可以将新图片下载为 JPG 或 PNG。

我正在尝试向页面添加 SVG 过滤器，但遇到了死胡同。例如，feColorMatrix 过滤器不会影响第一个画布（CSS 过滤器或自定义过滤器用于编辑图像）。当画布和过滤器设置复制到第二个画布进行下载时，SVG 效果突然出现，但仅在浏览器中（如果您下载图像，则不会进行实际更改）。

一切（打开图像、显示在预览画布中以使用 CSS 或我的自定义过滤器进行编辑、将图像和过滤器设置复制到新画布以及保存新图像）与 CSS 完美配合。如上所述，CSS + SVG 不起作用。这是我到目前为止的 SVG 代码：

<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>

希望得到帮助。

谢谢！