3

私はpngをクリックしてSVg外部をロードできるページにサイトを持っています。カラーピッカーを使用すると色を変更でき、ドラッグ可能でサイズ変更可能で、SVG の位置と寸法を変更できます。
今、この SVG を html2canvas で保存したいと思います。
html2canvas が SVG をサポートしていないことはわかっています。そのためには canvg を使用する必要があります。
しかし、保存時に動的SVGをcanvgで変換するにはどうすればよいですか?
画像の位置の色や寸法が変わらないようにしたいからです。
可能です?
canvg my dinamuc SVG で変換するにはどうすればよいですか?

これは私のコードです(非常に複雑なので簡略化しました)
JQUERY:

//function that clone svg and insert into a div that will be saved
$('.insert-forme').click(function(){
        var obj = $('#'+$(this).data('svg')).clone();
        obj.attr('id',$(this).data('svg')+'_'+n_svg_created).css('width','100px').css('height','100px').find('svg').attr('width','100').attr('height','100');        

        obj.appendTo('#space-drawable-div').resizable({
            alsoResize: obj.find('svg'),
            containment: $('#space-drawable-div'),
            aspectRatio: true,
            maxWidth: 212,
            maxHeight: 220
        }).draggable({ 
            containment: $('#space-drawable-div')
        })
        n_svg_created++;
    });
//function that save the div where I have svg, text, image..
$('#save-tee').click(function(){
        var background = $('#space-drawable-div').css('background-color');
            html2canvas($('#space-drawable-div'), {
                background:$('#bg-tee').css('background-color'),
                logging: true,
                profile: true,
                useCORS: true,
                allowTaint: true,
                onrendered: function(canvas) {
                    var dataURL = canvas.toDataURL('image/png');
                    var ajax_url ="<?php echo(site_url('/tee/save_tee')); ?>";
                    $.ajax({   
                        url: ajax_url, 
                        type: "POST", 
                        data: { 
                            imgBase64: dataURL,
                            title: title,
                            background: background,
                            type_tee:type_tee
                        }
                    });
                }
            }); 
    });

HTML:

<img src="/img/tee/forme/star.png" style="width:30px; margin-left:11px; cursor:pointer;" alt="forme" class="insert-forme" data-svg="star-svg" />

<div class="container-svg dynamic-element" id="star-svg" data-left="" data-top="" data-fill="">
<svg version="1.1" id="Livello_1" fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<polygon class="svg" id="test" points="149.999,7.342 196.353,101.262 300,116.323 224.999,189.429 242.704,292.658 149.999,243.921 57.295,292.658 
 75,189.429 0,116.323 103.647,101.262 "/>
</svg>
</div>
4

0 に答える 0