使用jqprint打印Canvas元素

Question

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

Answer 1

有些浏览器会在打印前清除画布。

解决这一问题的一种方法是在带有画布的DOM中插入一个图像元素，然后定义两个CSS类：

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

然后关键是每次需要都用画布的内容更新图像。

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

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

关于打印和分辨率的注意事项：当您打印画布时，请记住分辨率很重要——屏幕通常相当于72/96 DPI，而打印通常为300 DPI。这可能会导致打印看起来模糊，除非您增加画布的大小并使用CSS将其保持在屏幕大小内。有关此方面的提示，请参见以下答案：打印画布内容。您还需要处理缩放的鼠标位置(此处未涉及)。

请注意，CORS限制适用于画布被不同的原始图像污染的情况(绘制到画布的图像来自页面本身以外的另一个域)。