0

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

4

1 回答 1

2

不幸的是，某些浏览器会在打印前清除画布。

解决这个问题的一种方法是在 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 限制。

于 2014-02-19T16:43:32.630 回答