私は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>