打印画布内容答案

【问题标题】：Print canvas contents打印画布内容
【发布时间】：2013-11-14 07:38:29
【问题描述】：

var print = document.createElement('button');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 100;

ctx.fillStyle = '#000';
ctx.font = '15px sans-serif';
ctx.fillText('Fill Text, 18px, sans-serif', 10, 20);

print.innerHTML = 'Print';

document.body.appendChild(print);
document.body.appendChild(canvas);

print.addEventListener('click', function () {
    window.print();
});

http://jsfiddle.net/vpetrychuk/LWup5/.

您可以看到画布中的文本显示正常，但单击“打印”按钮（并将页面另存为 PDF）后，输出图像变得难看。

有没有机会打印画布内容而不模糊？

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

丹尼尔的回答效果很好。打印图像而不是画布更好。您无需编写任何 JS hack。

【讨论】：

这应该在评论中，而不是作为答案
我还没有发布 cmets 的声誉，所以这是对所提出的解决方案表示赞赏的唯一方法。

【解决方案2】：

更好的解决方案是使用 canvas.toDataURL() 方法，然后将生成的字符串设置为 img 的 src。执行此操作时，请通过 Javascript 生成画布，并且永远不要将其实际附加到页面主体。

【讨论】：

【解决方案3】：

我在 css width: 100% 中用于画布，导致缩放错误

已通过将 100% 更改为 210mm 修复

【讨论】：

【解决方案4】：

您需要以打印尺寸制作实际的画布，然后使用 CSS 规则在屏幕上进行缩放。

浏览器将始终首先使用内部位图大小，然后将其调整为打印或屏幕。如果位图分辨率高，打印效果会更好。

但请注意，当您打印到画布时，您需要缩放每个坐标和大小。您还需要优先考虑屏幕和印刷，因为其中之一会看起来更糟（如果您优先考虑印刷，它在屏幕和 vica verse 上看起来不会超级好）。

这是一个 modified example of your canvas，现在相当于 300 DPI（相对于默认的 96 DPI）。您可以看到它在屏幕上看起来大致相同，但打印时会更清晰。

/// conversion factor for scale, we want 300 DPI in this example
var dpiFactor = 300 / 96,
    width = 400,
    height = 100;

/// set canvas size representing 300 DPI
canvas.width = width * dpiFactor;
canvas.height = height * dpiFactor;

/// scale all content to fit the 96 DPI display (DPI doesn't really matter here)
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

/// scale all sizes incl. font size
ctx.font = (15 * dpiFactor).toFixed(0) + 'px sans-serif';

/// scale all positions
ctx.fillText('Fill Text, 18px, sans-serif', 10 * dpiFactor, 20 * dpiFactor);

只需使用包装函数为您完成所有数学运算：

function fillText(txt, x, y) {
    ctx.fillText(txt, x * dpiFactor, y * dpiFactor);
}

【讨论】：

【解决方案5】：

您可以尝试检测何时打印（例如使用 Webkit window.matchMedia），但实际打印是使用不受您控制的缩放完成的，因此不可能为清晰的图形创建完美的 1x1 缩放画布。

您可以在检测到打印时将画布替换为分辨率足够高的版本，但输出的确切实际尺寸未知。就像用户对页面有一个缩放视图......即使画布已经被清晰地绘制，浏览器也可以缩放它，从而使结果变得模糊。

对于文本，最佳质量选项可能是使用在画布上叠加的常规文本div，而不是使用fillText（当然这不适用于所有用例）。

【讨论】：