jquery - 使用 jqprint 打印 Canvas 元素

Question

我的网页中有一个签名，使用的是canvas。我想用 jqprint 打印它。打印适用于页面中除 canvas 元素之外的所有内容。我需要写任何 css 来打印签名吗？请在我的网站上实时查看http://aslobi.com/

Answer 1

不幸的是，有些浏览器会在打印前清除 Canvas 。

解决这个问题的一种方法是使用 Canvas 在 DOM 中插入一个图像元素，然后定义两个 CSS 类:

• 一个用于在屏幕上隐藏图像，显示 Canvas
• 一个用于打印显示图像，隐藏 Canvas

然后关键是每次需要时用 Canvas 的内容更新图像。

function updatePrint() {

    var img = document.getElementById('printImage'),  /// get image element
        canvas  = document.getElementById('canvas');  /// get canvas element

    img.src = canvas.toDataURL();                     /// update image
}

然后根据媒体类型定义一些 CSS 规则:

@media screen {
    #canvas {display:block} /* or inline-block */
    #printImage {display:none}
    }

@media print {
    #canvas {display:none}
    #printImage {display:block}
    }

(只要打印定义在 Canvas 和图像的标准规则之后，就完全没有必要为屏幕定义一个)。

关于打印和分辨率的注意事项:打印 Canvas 时请记住分辨率很重要 - 屏幕通常相当于 72/96 DPI，而打印通常为 300 DPI。这可能会导致打印看起来模糊，除非您增加 Canvas 的大小并使用 CSS 将其保持在屏幕大小范围内。有关这方面的提示，请参见例如这个答案: Print canvas contents .您还需要处理缩放的鼠标位置(此处未介绍)。

请注意，CORS 限制适用于此处，以防 Canvas 被不同来源的图像污染(绘制到它的图像来自另一个域而不是页面本身)。