画布中的多个svg并转换为png

时间:2014-02-26 04:59:33

标签: svg png

我的svg之前生成过, 我想知道如何将多个svg转换为png?

这是我的代码,它几乎适用于我的所有测试:

function get_print()
{   
            //COMBINE ALL SVG TO ONE 
            var rdr = $('#radar').html();
            var test1 = $('#test1').html();
            var test2 = $('#test2').html();
            var test3 = $('#test3').html();
            var test4 = $('#test4').html();
            var test5 = $('#test5').html();
            rdr   = '<g transform="translate(0,0)" >'+rdr.substr(32,((rdr.length)-38))+'</g>'; 
            test1 = '<g transform="translate(0,900)" >'+test1.substr(107,((test1.length)-113))+'</g>';
            test2 = '<g transform="translate(0,1100)" >'+test2.substr(107,((test2.length)-113))+'</g>';
            test3 = '<g transform="translate(0,1300)" >'+test3.substr(107,((test3.length)-113))+'</g>';
            test4 = '<g transform="translate(0,1500)" >'+test4.substr(107,((test4.length)-113))+'</g>';
            test5 = '<g transform="translate(0,1700)" >'+test5.substr(107,((test5.length)-113))+'</g>';
            //GET RADAR LEGEND
            var all_lg = ""; 
            var lg = $('#radar_legend').html();
            var cnt = 1;
            while(lg.indexOf('</svg>') != -1)
            {
                var new_lg = lg.substr(lg.indexOf('<g>'),lg.indexOf('</svg>')-lg.indexOf('<g>'));
                all_lg +='<g transform="translate(0,'+cnt*38+')" >'+new_lg+'</g>';
                lg = lg.substr(lg.indexOf('</svg>')+6,lg.length); 
                cnt++;
            }


            var combined = '<g width="1100" height="1900">'+all_lg+rdr+test1+test2+test3+test4+test5+'</g>';
            //CONVERT TO CANVAS
            var c    = document.getElementById('cnv'); 
            context  = document.getElementById('cnv').getContext; 
            if(c.getContext) 
            {
                c.getContext = context;
                c.width  = 1100;
                c.height = 1900;
            }
            canvg(c,combined);
            //PRINT
            Canvas2Image.saveAsImage(c, '1100', '1900', 'png');
            $("#cnv").remove();
            $("body").append('<canvas id="cnv" width="1%" height="1%"></canvas>');
        }

我怎么能分开做所有事情?

0 个答案:

没有答案