FIDDLE

Question

如何打印由jsPlumb构建的SVG元素。

已知通过此代码检索jsPlumb绘制的所有SVG元素：

var uiJsPlumbConnectors=jsPlumb.getAllConnections().map(function(conn){return conn.canvas;})

所有连接器都是SVG元素：

使用html2canvas打印所有连接器（SVG），它不起作用：

html2canvas(uiJsPlumbConnectors).then(function(c){

     window.open(c.toDataURL('image/png'))

});

已生成图像，但它是一个真实的图像。

FIDDLE

似乎`html2canvas`还不支持多元素绘图？

Answer 1

上次我检查html2canvas无法转换SVG时，您需要另一个脚本来处理它。

步骤：

将html元素转移到画布
将svg元素转移到画布
导出画布

在使用html2canvas之后，我使用https://code.google.com/p/canvg/导出到同一个画布。希望对你有帮助。

Answer 2

我刚刚实现了这个

<%--stuff for printing--%>
<script type="text/javascript" src="../../../../Scripts/Print/html2canvas.js"></script>
<script src="<%=AdminPath%>Scripts/canvg/rgbcolor.js" type="text/javascript"></script>
<script src="<%=AdminPath%>Scripts/canvg/StackBlur.js" type="text/javascript"></script>
<script src="<%=AdminPath%>Scripts/canvg/canvg.js" type="text/javascript"></script>

jsplumb div

<div class="demo statemachine-demo" id="statemachine-demo" style="margin: 0px;">
            </div>

用于打印的隐藏div

            <div id="canvasDiv" style='visibility:hidden;' >
            </div>


function renderImage()
{
    var statemachinediv = document.getElementById('statemachine-demo'); 

    html2canvas([statemachinediv], {
        onrendered: function (canvas) {

            document.getElementById('canvasDiv').appendChild(canvas);
            var svgList = $(statemachinediv).find( "svg" );

            svgList.each(function(index, value) { 

                try 
                {
                    var svgExample = this; 

                    var serializer = new XMLSerializer();
                    var svgMarkup = serializer.serializeToString(svgExample);

                    if(svgMarkup.indexOf("_jsPlumb_connector") > -1)
                    {
                        var leftIndex = svgMarkup.indexOf("left: "); 
                        var endOfLeft = svgMarkup.indexOf("px", leftIndex);
                        var leftPosition = svgMarkup.substring(leftIndex+6, endOfLeft );
                        var left = parseInt(leftPosition); 

                        var topIndex = svgMarkup.indexOf("top: "); 
                        var endOfTop = svgMarkup.indexOf("px", topIndex);
                        var topPosition = svgMarkup.substring(topIndex+5, endOfTop );
                        var top = parseInt(topPosition); 

                        svgMarkup = svgMarkup.replace('xmlns="http://www.w3.org/2000/svg"',''); 

                        var connectorCanvas = document.createElement('canvas');
                        canvg(connectorCanvas, svgMarkup); //add connector to canvas

                        var context = canvas.getContext('2d');
                        context.drawImage(connectorCanvas, left, top);
                    }
                }
                catch(err)
                {
                    showBalloon('error in print'); 
                }
            });


            var stateMachineName =     $("#stateMachineDropDown option:selected").text();

            var data = canvas.toDataURL('image/png');

            var mywindow = window.open('', 'my div', 'height=400,width=600');

            mywindow.document.write('<html><head><title>' + stateMachineName + '</title>');
            mywindow.document.write('</head><body ><table><tr><td>');
            mywindow.document.write('</td></tr></table><img src="' + data + '" />');
            mywindow.document.write('</body></html>');

            mywindow.print();




        }
    });

    return false; 

}

html2canvas不会打印jsPlumb连接器

FIDDLE

似乎`html2canvas`还不支持多元素绘图？

2 个答案:

html2canvas不会打印jsPlumb连接器

FIDDLE

似乎html2canvas还不支持多元素绘图？

2 个答案:

似乎`html2canvas`还不支持多元素绘图？