html2canvas 不打印 jsPlumb 连接器

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'))

});

一张图片已经生成，但是是一张emply图片。

FIDDLE

好像`html2canvas`还不支持多元素绘图？

Answer 1

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

步骤：

将html个元素转移到canvas
将 svg 元素转移到 canvas
出口canvas

在使用 html2canvas 后，我使用 https://code.google.com/p/canvg/ 导出到相同的 canvas。希望对你有帮助。

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>

hidden div for printing

            <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 连接器

html2canvas does not print jsPlumb Connectors

svg

jsplumb

html2canvas

FIDDLE

好像html2canvas还不支持多元素绘图？

好像`html2canvas`还不支持多元素绘图？