html5-canvas - 打印整个 Cytoscape.js HTML5 Canvas 。不只是可见的部分

Question

我正在使用 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>

Answer 1

您可以将整个图表作为 PNG 或 JPG 图像获取:

cy.png({full: true})

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