Question

我的网页中有一个使用signature的{{1}}。我想用canvas打印它。打印工作页面中除canvas元素之外的所有内容。我是否需要编写任何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将其保持在屏幕大小之内。有关此提示，请参阅此答案： Print canvas contents。您还需要处理缩放的鼠标位置（此处未涉及）。

请注意，如果画布受到不同原始图像（从其他域绘制的图像而不是页面本身）的污染，此处适用CORS限制。

使用jqprint打印Canvas元素

1 个答案: