將SVG過濾器應用的圖像轉換爲二進制或base64以保存在後端

Question

我在GUI中顯示圖像並應用了SVG過濾器。現在我的要求是通過轉換爲二進制或base64來保存這個已更改的圖像[應用了SVG過濾器]。我試圖使用畫布轉換。但無法實現。這是我迄今爲止所嘗試的。任何人都可以提供一些提示繼續。

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將圖像繪製到畫布上，並使用上下文的新"filter" property。目前只有Firefox支持它，但只有通過標誌啓用它（canvas.filters.enabled）。其他供應商對這個想法有些冷淡，因此支持有限。但是，如果這是一個私人項目，那麼它可能是一個足夠好的解決方案;過濾器允許您將過濾器直接應用到位圖，而無需通過使用相同定義的SVG。如果這是一個公共項目，您可以使用下面的選項3 -

選項3是在代碼中實現過濾器算法並將它們應用於畫布。這是一個更多的工作（實際上更多一點），但嘿，我們是開發人員和編碼是有趣的！ :)

您可以在SVG specifications以及其他地方找到過濾器的基礎和公式。

或檢查一些libraries已經通過了籃球。