SVGフィルタ適用イメージをバイナリまたはベース64に変換してバックエンドに保存します

Question

GUIでイメージを表示し、SVGフィルタを適用しています。今私の必要条件は、バイナリまたはbase64に変換することで、この変更されたイメージ[SVGフィルタが適用された状態で]を保存することです。私はキャンバスを使って変換しようとしました。しかし、それを達成できませんでした。ここまで私が試したことがあります。誰もが進むためのいくつかのヒントを与えることができます。原因security reasonsへ

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

あなたは、特に外部ソースへのSVGポイントあれば、多くの場合、画像にSVGを変換することができません。一部のブラウザでは、イメージやCSSなどのインラインリソースを使用できますが、IEなどの一部のブラウザでは許可されません。

オプション2は、画像をキャンバスに描画し、コンテキストの新しい"filter" propertyを使用することです。現在のところ、それをサポートするのはFirefoxだけですが、フラグ（canvas.filters.enabled）で有効にしている場合のみです。他のベンダーはこのアイデアには多少控え目だから、限られたサポートしかない。しかし、これが私的プロジェクトであれば、それは十分な解決策であるかもしれません。フィルタを使用すると、同じ定義を使用してSVGを経由することなく、フィルタをビットマップに直接適用できます。これが公開プロジェクトの場合は、以下のオプション3が残ります。

オプション3は、フィルタアルゴリズムをコードで実装し、キャンバスに適用することです。もう少し作業がありますが（実際はかなり多少ですが）、私たちは開発者であり、コーディングは楽しいです！ :)

SVG specificationsなどのフィルタの基本と公式を見つけることができます。

librariesまたは既にフープを通過したものを確認してください。