3

我有一个网站，我可以在一个页面中点击一个 png 并加载一个 SVG 外部。使用颜色选择器我可以改变它的颜色，通过可拖动和调整大小我可以改变我的 SVG 的位置和尺寸。
现在我想用 html2canvas 保存这个 SVG。
我知道 html2canvas 不支持 SVG，为此我必须使用 canvg。
但是，当我保存时，如何使用 canvg 转换我的动态 SVG？
因为我希望图像不会改变位置颜色或尺寸。
有可能吗？
如何使用 canvg 转换我的 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