【问题标题】：html2canvas does not print jsPlumb Connectorshtml2canvas 不打印 jsPlumb 连接器
【发布时间】：2015-09-02 23:22:15
【问题描述】：

如何打印由 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`好像还不支持多元素绘制？

【问题讨论】：

标签： svg jsplumb html2canvas

【解决方案1】：

我刚刚实现了这个

<%--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; 

}

【讨论】：

【解决方案2】：

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

步骤：

将 html 元素传输到画布
将 svg 元素传输到画布
导出画布

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

【讨论】：

FIDDLE

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

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