HTML画布打印预览

Question

我在尝试打印画布内容。我有以下的javascript代码，在打印按钮点击，以获得打印预览。

     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);
        }

这是我的画布内容，包括页面内容。

​

​

我只想输出和打印图像。不想显示或打印页面内容。

现在，我看到了打印预览上的所有元素。如何排除除图像之外的所有元素？

​

​

Answer 1

printJS({
  printable: ['images/print-01-highres.jpg'],
  type: 'image',
  imageStyle: 'width:50%;margin-bottom:20px;'
 });

来自这个图书馆，它有一个对您所要查看的内容非常重要的函数。