将 SVG 滤镜应用图像转换为二进制或 base64 以保存在后端

Question

我在 GUI 中显示图像并对其应用了 SVG 滤镜。现在我的要求是通过转换为二进制或 base64 来保存这个改变后的图像[应用 SVG 过滤器]。我尝试使用 canvas 进行转换。但无法实现。这是我到目前为止所尝试的。任何人都可以提供一些提示以继续进行。

JsFiddle Link

<div class="item active filtered" data-slide-number="0">
    <svg style="overflow: hidden; height: 637px; width: 546px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
        <defs>
            <filter id="svgBlur" width="110%" height="110%">
                <feComponentTransfer id="bFilter">
                    <feFuncR id="brightness1" class="brgt" type="linear" slope="2"></feFuncR>
                    <feFuncG id="brightness2" class="brgt" type="linear" slope="1"></feFuncG>
                    <feFuncB id="brightness3" class="brgt" type="linear" slope="1"></feFuncB>
                </feComponentTransfer>
                <feComponentTransfer id="cFilter">
                    <feFuncR id="contrast1" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncR>
                    <feFuncG id="contrast2" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncG>
                    <feFuncB id="contrast3" class="cnst" type="linear" slope="1" intercept="-0.01"></feFuncB>
                </feComponentTransfer>
                <feComponentTransfer id="gFilter">
                    <feFuncR id="gamma1" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncR>
                    <feFuncG id="gamma2" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncG>
                    <feFuncB id="gamma3" class="gama" type="gamma" amplitude="1" exponent="1" offset="0"></feFuncB>
                </feComponentTransfer>
                <feColorMatrix id="saturation" type="saturate" values="1"></feColorMatrix>
            </filter>
        </defs>
        <g id="viewport-20160404045307934" class="svg-pan-zoom_viewport" transform="matrix(1.011111111111111,0,0,1.011111111111111,2.52222222222224,0)">
            <image xlink:href="https://www.ricoh.com/r_dc/caplio/r7/img/sample_03.jpg" class="img-responsive" width="90%" id="imageStyling" height="630px" style="height: 630px; width: 536px;" filter="url(#svgBlur)" name="ipsDF14-2-29Feb16-9d80-1a94a2e8c121"></image>
        </g>
    </svg>
</div>

    <button id="save">Save</button>

    <canvas id="canvas"></canvas>



$(document).ready(function() {
    var btn = document.querySelector('button');
    var svg = document.querySelector('svg');
    var canvas = document.querySelector('canvas');
    $("#save").click(function() {

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var data = (new XMLSerializer()).serializeToString(svg);
        var DOMURL = window.URL || window.webkitURL || window;

        var img = new Image();
        var svgBlob = new Blob([data], {
            type: 'image/svg+xml;charset=utf-8'
        });
        var url = DOMURL.createObjectURL(svgBlob);
        alert(JSON.stringify(url));
    })
});

Answer 1

由于 security reasons 在许多情况下您无法将 SVG 转换为图像，尤其是当 SVG 指向外部源时。一些浏览器接受内联资源，如图像和 CSS，但即使这样做，一些浏览器（如 IE）也不允许。

选项 2 是将图像绘制到 canvas 并使用上下文的新 "filter" property。目前只有 Firefox 支持它，但前提是您通过标志 (canvas.filters.enabled) 启用它。其他供应商对这个想法有些冷淡，因此支持有限。但是，如果这是一个私人项目，那么它可能是一个足够好的解决方案；过滤器允许您直接将过滤器应用于位图，而无需使用相同的定义通过 SVG。如果这是一个 public 项目，您将剩下下面的选项 3 -

选项 3 是在代码中实现过滤器算法并将其应用于 canvas。这是更多的工作（实际上更多）但是嘿，我们是开发人员，编码很有趣！ :)

您可以在 SVG specifications 和其他地方找到过滤器的基础和公式。

或者检查一些已经过关的libraries。

将 SVG 滤镜应用图像转换为二进制或 base64 以保存在后端

Convert SVG filter applied image to binary or base64 to save in backend

javascript

canvas

svg-filters