Html5 canvas 打印整个Cytoscape.js HTML5画布。不仅仅是可见的部分

我使用的是Cytoscape.js，我试图打印出整个图表，而不仅仅是可见部分。如果用户放大，我希望它可以打印在许多页面上

我所能得到的最好的只是可见的部分

我很惊讶Cytoscape.js中没有内置打印功能

<script>
    function printCanvas() {

        var padding = 10; // padding around found objects
        var canvases = $('canvas');
        var context = canvases[2].getContext('2d');
        // find borders of a rectange covering all objects

        var newWidth = canvases[2].width;
        var newHeight = canvases[2].height;

        // create a new canvas
        var newcanvas = document.createElement('canvas');
        newcanvas.width = newWidth + 2 * padding;
        newcanvas.height = newHeight + 2 * padding;
        var newcontext = newcanvas.getContext('2d');

        // copy data to the new canvas
        newcontext.putImageData(context.getImageData(0, 0, newWidth, newHeight), padding, padding);

        popup = window.open();
        popup.document.body.innerHTML = "<img src='" + newcanvas.toDataURL('png') + "' />";

        popup.print();
    }
</script>

函数printCanvas（）{
var padding=10；//在找到的对象周围填充
var画布=$（“画布”）；
var context=canvases[2].getContext（'2d'）；
//查找覆盖所有对象的矩形的边界
var newWidth=画布[2]。宽度；
var newHeight=画布[2]。高度；
//创建一个新画布
var newcanvas=document.createElement（'canvas'）；
newcanvas.width=newWidth+2*填充；
newcanvas.height=newHeight+2*填充；
var newcontext=newcanvas.getContext（'2d'）；
//将数据复制到新画布
putImageData（context.getImageData（0，0，newWidth，newHeight），padding，padding）；
popup=window.open（）；
popup.document.body.innerHTML=“”；
popup.print（）；
}

您可以将整个图形显示为PNG或JPG图像：

---

有关更多详细信息，请参阅。

我不了解Cytoscape.js。但在画布上，我会使用缓冲画布（未连接到DOM或“display；none；”）来绘制整个图像，并将此画布的部分复制到可见的画布上。从你的代码中，我看到你正在使用2张画布。屏幕上有这两个选项吗？如果这两个画布中有一个是abuffer canvas，您可以使用toDataURL（）恢复数据。实际上，我没有创建画布，它们是由Cytoscape.js创建的。

cy.png({full: true})