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

时间:2018-09-27 19:10:56

标签: html5-canvas cytoscape.js

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

1 个答案:

答案 0 :(得分:0)

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

cy.png({full: true})

有关更多详细信息,请参见documentation