Convert SVG-Filter angewendet Bild auf Binär-oder Base64, um im Backend

Question

Ich zeige ein Bild in der GUI und angewandte SVG-Filter auf es. Jetzt ist es meine Anforderung, dieses veränderte Bild [mit SVG-Filter angewendet] zu speichern, indem ich in binary oder base64 umwandle. Ich habe versucht, mit Leinwand zu konvertieren. Aber konnte es nicht erreichen. Hier ist, was ich bis jetzt versucht habe. Kann jemand Tipps geben, um fortzufahren?

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

Aufgrund security reasons Sie werden in vielen Fällen nicht in der Lage sein, SVG Bild zu konvertieren, vor allem, wenn die SVG Punkten auf externe Quellen. Einige Browser akzeptieren eingefügte Ressourcen wie Bilder und CSS, aber selbst wenn dies getan wird, erlauben einige Browser wie IE es nicht.

Option 2 besteht darin, das Bild auf einen Zeichenbereich zu zeichnen und den neuen "filter" property des Kontexts zu verwenden. Momentan ist es nur Firefox, der es unterstützt, aber nur, wenn Sie es über Flags aktivieren (canvas.filters.enabled). Andere Anbieter sind etwas lauwarm gegenüber der Idee, so dass die Unterstützung begrenzt ist. Wenn es sich jedoch um ein privates Projekt handelt, kann dies eine Lösung sein, die gut genug ist. Mit Filtern können Sie Filter direkt auf die Bitmap anwenden, ohne SVG mit denselben Definitionen zu verwenden. Wenn es sich um ein öffentliches Projekt handelt, bleibt die folgende Option 3 übrig -

Option 3 besteht darin, die Filteralgorithmen im Code zu implementieren und sie auf die Zeichenfläche anzuwenden. Es ist ein bisschen mehr Arbeit (eigentlich ein bisschen mehr) aber hey, wir sind Entwickler und das Programmieren macht Spaß! :)

Sie können die Basis und Formeln für Filter in der SVG specifications sowie anderswo finden.

Oder überprüfen Sie einige libraries, die bereits durch die Reifen gingen.