SVG filtresi uygulanmış görüntüyü arka plana kaydetmek için ikili veya base64'e dönüştürme

Question

GUI'de bir görüntü ve uygulanmış SVG filtreleri görüntüliyorum. Şimdi benim gereksinim bu değiştirilmiş görüntüyü (SVG filtresiyle) ikili ya da base64'e dönüştürerek kaydetmek. Tuvali kullanarak dönüştürmeyi denedim. Ama bunu başaramadı. Şimdiye kadar denediğim şey buydu. Devam etmek için bazı ipuçları verebilir.

<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

JsFiddle Link

nedeniyle security reasons için özellikle SVG noktaları ise dış kaynaklara, birçok durumda görüntüye SVG dönüştürmek mümkün olmayacaktır. Bazı tarayıcılar, resimler ve CSS gibi sıralı kaynakları kabul eder, ancak bununla birlikte IE gibi bazı tarayıcılar buna izin vermez.

Seçenek 2, görüntüyü bir tuvale çekmek ve içeriğin yeni "filter" property'unu kullanmaktır. Şu anda bunu destekleyen sadece Firefox'tur, ancak yalnızca bayraklar aracılığıyla etkinleştirirseniz (canvas.filters.enabled). Diğer satıcılar fikir için biraz ılık ve dolayısıyla sınırlı destek var. Ancak, bu özel bir proje ise, o zaman yeterince iyi bir çözüm olabilir; Filtreler, aynı tanımları kullanarak SVG'den geçmeden filtreleri doğrudan bitmap uygulamanıza izin verir. Bu bir kamu projesi ise, aşağıda seçenek 3 ile ayrıldınız -

Seçenek 3, filtre algoritmalarını kod içinde uygulamak ve bunları tuvale uygulamaktır. Biraz daha fazla çalışma (aslında biraz daha fazla) ama hey, biz geliştiriciler ve kodlama eğlenceli!

Filtreler için temel ve formüller SVG specifications'un yanı sıra başka bir yerde de bulabilirsiniz. Ya da zaten çemberler içinden geçen libraries ya da kontrol edin.