HTML Canvas print preview

Viewed 13

I'm trying to print canvas content. I have following javascript code on the print button click to get a print preview.

     function openPrintDialog(isLandscape, paperSize) {
            /*jshint multistr: true */
            var style = '<style context="program"> \
            @media print { \
                * { \
                    display: block; \
                } \
\
                html, body, .hidden-print-image, *{ \
                    display: block; \
                    text-align: center; \
                } \
\
                img { \
                    ' + (isLandscape ? 'max-width: ' + paperSize.heightMm + ';' : 'max-width: ' + paperSize.widthMm + ';') + '\
                    ' + (isLandscape ? 'max-height:' + paperSize.widthMm + ';' : 'max-height: ' + paperSize.heightMm + ';') + '\
                } \
            } \
            </style>';

            $('head').append(style);            
            window.print();

            $timeout(function() {
                $('[context=program]').remove();

                $('.hidden-print-image').remove();
            }, 2000);
        }

This is my canvas content including the page content.

enter image description here

I only want to export and print the image only. Don't want to show or print the page content.

At the moment I see all elements on the print preview. How can I exclude all the elements except for the image?

enter image description here

0 Answers
Related